[英]Redux state is being changed but props are undefined when using mapStateToProps
I am using React-redux in my app and I have encountered this problem where I am using connect(mapStateToProps,mapDispatchToProps)(Component)
and am able to successfuly manipulate the redux state with the mapped dispatch. 我在我的应用程序中使用React-redux,我遇到了这个问题,我使用connect(mapStateToProps,mapDispatchToProps)(Component)
并且能够成功地使用映射的调度来操作redux状态。 Using the dev tools I see that the state has changed successfully, but the mapped props are always undefined in any component. 使用开发工具我看到状态已成功更改,但映射的props在任何组件中始终未定义。
Example component where I am trying it: 我正在尝试的示例组件:
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);
However, this has been working before. 但是,这之前一直在努力。 I took a break from the code for a while so I don't exactly remember what I have changed to break this, but I am quite sure it has something to do with React router so here's my routes: 我暂时从代码中休息了一段时间,所以我不记得我改变了什么来打破这个,但我很确定它与React路由器有关,所以这里是我的路线:
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>
);
I am basically using App
as the main container, where I call a thunk action that checks whether there's a token in localStorage and then if yes, calls and action that reapplies the token state (the same action called on successfull login). 我基本上使用App
作为主容器,我在其中调用thunk动作来检查localStorage中是否有令牌,然后如果是,则重新应用令牌状态的调用和操作(成功登录时调用相同的操作)。 This action, before reapplying the state, redirects the user to /app/dashboard
, if there are no credentials saved in localStorage, the app redirects to /login
automatically. 在重新应用状态之前,此操作会将用户重定向到/app/dashboard
,如果localStorage中没有保存凭据,则应用会自动重定向到/login
。
my index.js
: 我的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);
Is there anything that I am doing wrong about the routing, that makes mapStateToProps
not return the props correctly ? 我有什么错误的路由,这使得mapStateToProps
没有正确返回道具?
Thanks in advance for help. 在此先感谢您的帮助。
EDIT: I just edited my mapStateToProps
to this, in order to see whether the state gets passed: 编辑:我刚刚编辑了我的mapStateToProps
,以查看状态是否通过:
const mapStateToProps = (state) => {
console.log(state);
return {
idToken: state.idToken,
};
};
and the log output is undefined
并且日志输出undefined
I feel you did not add your previous state in reducer when you updated your state. 当您更新状态时,我觉得您没有在reducer中添加以前的状态。 For example if your new state is return {action.something}, then it might be {...state , action.something}. 例如,如果您的新状态是return {action.something},那么它可能是{... state,action.something}。 i had such problem. 我有这样的问题。 i am not expert, still working and learning. 我不是专家,仍在工作和学习。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.