Question

我在我的应用程序中使用React-redux，我遇到了这个问题，我使用connect(mapStateToProps,mapDispatchToProps)(Component)并且能够成功地使用映射的调度来操作redux状态。使用开发工具，我看到状态已成功更改，但映射的道具在任何组件中始终未定义。

我正在尝试的示例组件：

class DashboardPage extends React.Component {
  componentWillMount() {
    console.log(this.props.idToken);
  }
  render() {
    return (
        <div>
            <div className="dashboard-container">
                <p>{this.props.idToken}</p>

                <button onClick={() =>  {this.props.logout()}}>
                    LOGOUT
                </button>
            <button onClick={() =>  {browserHistory.push('/app/play')}}>
                    PLAY
                </button>
            <button onClick={() =>  {this.props.setIsLoading(true)}}>
                    TEST
                </button>
            </div>
        </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    idToken: state.idToken,
  };
};

export default connect(mapStateToProps, { logout, setIsLoading })(DashboardPage);

然而，这之前一直在努力。我暂时从代码中休息了一段时间，所以我不记得我改变了什么来打破这个，但我很确定它与React路由器有关，所以这里是我的路线：< / p>

export default (
    <Route path="/" component={App}>
        <Route path="app" component={Authorized}>
            <IndexRedirect to="/app/dashboard"/>
            <Route path="dashboard" component={DashboardPage} />
            <Route path="play" component={PlayPage}/>
        </Route>
        <Route path="login" component={Login} />
    </Route>
);

我基本上使用App作为主容器，我在其中调用thunk动作来检查localStorage中是否存在令牌，然后如果是，则重新应用令牌状态的调用和操作（相同）成功登录时调用的动作）。在重新应用状态之前，此操作会将用户重定向到/app/dashboard，如果localStorage中没有保存凭据，则应用会自动重定向到/login。

我的index.js：

const appRoot = document.getElementById('app-root');

const store = createStore(reducers, compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
));

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , appRoot);

我是否有任何关于路由的错误，这使mapStateToProps无法正确返回道具？

提前感谢您的帮助。

编辑：我刚刚编辑了我的mapStateToProps，以查看状态是否通过：

const mapStateToProps = (state) => {
  console.log(state);
  return {
    idToken: state.idToken,
  };
};

，日志输出为undefined

Answer 1

我觉得您在更新状态时没有将以前的状态添加到reducer中。例如，如果您的新状态为return {action.something}，则可能为{... state，action.something}。我有这样的问题。我不是专家，仍在工作和学习。

正在更改Redux状态，但使用mapStateToProps

1 个答案: