使用 Redux 的 React Router v4 - 调度未通过

Question

所以，我一直在尝试将我的应用程序切换到 React Router v4（api 发生了很大变化），这就是我到达的地方：

路由器设置

const createStoreWithMiddleware = applyMiddleware(
   thunkMiddleware,
   createLogger
)(createStore);
const store = createStoreWithMiddleware(rootReducer);

const RouterLayout = () => (
    <Provider store={store}>
        <App>
            <Switch>
                <Route component={Login} path="/login" />
                <Route component={AccountDetails} path="/account/:id" />
            </Switch>
        </App>
    </Provider>
);

const routes = (
    <HashRouter>
        <RouterLayout />
    </HashRouter>
);

ReactDOM.render(routes, document.getElementById("app-container"));

现在我的问题是，由于某种原因，我无法将 redux 连接到我的组件：

export class Login extends React.Component<any, any> {
    componentDidMount() {
        console.log(this.props);
        // this.props.dispatch is undefined 
        // I'm getting however router props: 
        // match: Object, location: Object, history: Object, staticContext: undefined)
    }

    render() {
        return (
            <div>
                This is the Login Component
            </div>
        );
    }
}

export default connect((state: AppState): any => {
    return state;
})(Login);

有趣的是App 组件可以毫无问题地连接并访问dispatch，但Login 没有它。我很确定我做错了什么，但我不知道到底是什么。

Answer 1

如果this.props.dispatch 不可用，那么很可能您的组件没有连接到 redux。

我认为这里的问题是您将 Login 导出两次，一次作为 react 组件，另一次作为连接到 redux 存储的组件（默认导出）。在RouterLayout所在的文件中，你可能用大括号导入login，因此这里的Login组件就是没有连接到redux的组件。

此外，您的 createStore 看起来不正确。它应该如下所示：

const createStoreWithMiddleware = (reducer) => {
  const middlewares = applyMiddleware(
     thunkMiddleware,
     createLogger
  );

  return createStore(
    reducer,
    middlewares
  );
}

const store = createStoreWithMiddleware(rootReducer);