Question

我正在尝试将某些组件（USERS）连接到我的商店。我将向您展示每个步骤。

首先，我在index.js中创建商店：

// composeWithDevTools helps to follow state changes, remove in production
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducers, composeEnhancers(applyMiddleware(sagaMiddleware)));
//sagaMiddleware.run(usersSaga);
console.log('MYSTORE: ', store);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
);

我的减速器的编码方式如下：

import { combineReducers } from 'redux';
import usersReducer from './usersReducer';

export default combineReducers({
    users: usersReducer,
});

现在我的App.js文件如下：

import React from 'react';
import { HashRouter, Route, Redirect } from 'react-router-dom';
import { AuthorisationMails } from './route-components/AuthorisationMails.js';
import { ChangePassword } from './route-components/ChangePassword.js';
import { Credits } from './route-components/Credits.js';
import { Graphs } from './route-components/Graphs.js';
import { Groups } from './route-components/Groups.js';
import { HeaderBar } from './components/HeaderBar.js';
import { Home } from './route-components/Home.js';
import { Login } from './route-components/Login.js';
import { MailServers } from './route-components/MailServers.js';
import { MailStatus } from './route-components/MailStatus.js';
import { Options } from './route-components/Options.js';
import { StatusMails } from './route-components/StatusMails.js';
import { Users } from './route-components/Users.js';

const App = () => (
    <div>
        <HashRouter>
            <HeaderBar />
            <Route path="/">
                <Redirect to="/login" />
            </Route>
            <Route path="/login" component={Login} />
            <Route path="/dashboard_user" component={Users} />
        </HashRouter>
    </div>
);

export default App;

在“用户”中，我尝试使用mapstateToProps连接到商店并按照您在此处看到的那样进行连接：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../redux/actions';

export class Users extends Component {
    componentDidMount() {
        console.log('USERPROPS: ', this.props);
    }
    render() {
        return <div>Users</div>;
    }
}

const mapStateToProps = state => {
    console.log('USERSSTATE: ', state.user);
    return {
        users: state.userReducer,
    };
};

export default withRouter(connect(mapStateToProps)(Users));

这里的问题是，我以某种方式连接错误，因为USERPROPS的console.log不包含属性用户。它包含历史记录的位置和匹配项。

我尝试使用以下网址https://react-redux.js.org/api/connect进行连接。

关于为什么我的组件未连接到商店的任何想法？

Answer 1

我认为您可能需要使用state.users.user：

const mapStateToProps = state => {
    return {
        users: state.users.user,
    };
};

Answer 2

解决了这个问题，我在导入组件时去掉了括号，例如：

从'./route-components/Credits.js'导入{学分} =>从'./route-components/Credits.js'导入学分

为什么组件未连接到Redux存储？

2 个答案: