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

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'),
);

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

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

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

Answer 1

解决了，我在导入组件时去掉了括号，例如:

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