为什么组件没有连接到 redux 商店？答案

【问题标题】：Why is component not connecting to the redux store?为什么组件没有连接到 redux 商店？
【发布时间】：2019-09-13 13:58:48
【问题描述】：

我正在尝试将某些组件 (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'),
);

我的 reducer 是这样编码的：

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 不包含属性用户。它包含历史位置和匹配。

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

知道为什么我的组件没有连接到商店吗？

【问题讨论】：

标签： redux react-redux react-router

【解决方案1】：

解决了，我在导入组件的时候把括号去掉了，例如：

import { Credits } from './route-components/Credits.js' => import Credits from './route-components/Credits.js'

【讨论】：

是的，您必须将组件导出为默认值。

【解决方案2】：

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

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

【讨论】：

这不应该有任何区别，因为我仍然会在属性的 console.log 中看到 userReducer。
mapStateToProps 中 state.user 的 console.log 是否为空？尝试记录 state.userReducer
是的，我在 console.log 中映射 state.user，但它甚至没有打印：``` const mapStateToProps = state => { console.log('USERSSTATE: ', state.userReducer) ;返回{用户：state.userReducer.user，}； }; ```
试试 console.log('USERSSTATE: ', state.users.user); userReducer 在 combineReducers 步骤中重命名为 users。或者直接从 console.log('USERSSTATE: ', state.users);看看是否可行
同样，如果这些变量会退出，控制台语句应该返回 null，所以它似乎甚至没有到达那里。