[英]Redux state is undefined in mapStateToProps
我目前正在关注本教程。 我在以下代码中遇到了一些涉及mapStateToProps
的问题:
import React from 'react';
import Voting from './voting';
import {connect} from 'react-redux';
const mapStateToProps = (state) => {
return {
pair: state.getIn(['vote','pair']),
winner: state.get('winner')
};
}
const VotingContainer = connect(mapStateToProps)(Voting);
export default VotingContainer;
这是导入的投票组件:
import React from 'react';
import Vote from './Vote';
import Winner from './winner';
const Voting = ({pair,vote,hasVoted,winner}) =>
<div>
{winner ? <Winner winner={winner}/> :
<Vote pair={pair} vote={vote} hasVoted={hasVoted}/>
}
</div>
export default Voting;
它应该从pair
道具渲染两个按钮。 vote
道具是一个将在点击时执行的函数, hasVoted
在 true 时禁用按钮,而获胜者仅呈现如图所示的获胜者组件。
状态应该是一个不可变的JS映射,如下所示:
Map({
vote:{
pair:List.of('Movie A','Movie B')
}
});
相反,我收到一条错误消息,指出 state.getIn 行中的 state 未定义。
设置状态的代码在索引中:
const store = createStore(reducer);
const socket = io(document.location.protocol + '//' + document.location.hostname + ':8090');
socket.on('state', state => store.dispatch({
type: 'SET_STATE',
state
}));
我在设置后记录了store.getState()
,它是预期的,但在mapStateToProps
undefined
。 我还在上面的上下文中记录了状态变量,它也符合预期。
我也正常设置了状态,它出人意料地有效!:
store.dispatch({
type: 'SET_STATE',
state: {
vote: {
pair: ['Movie A', 'Movie B']
}
}
});
上面 state 的值正是从服务器收到的
最后这是我的减速器的样子:
import React from 'react';
import {Map, fromJS} from 'immutable';
const reducer = (state = Map(), action) => {
switch (action.type) {
case 'SET_STATE':
return state.merge(action.state);
}
}
export default reducer;
我做错了什么?
编辑:我意识到mapStateToProps
后不被称为store.dispatch()
我浏览了文档,原因mapStateToProps
是mapStateToProps
没有被调用,而且它不是其中之一。
您的减速器在 switch 语句中没有默认操作。 这就是为什么即使您在 reducer params 中提到了初始状态, undefined 也会作为 store 初始状态返回
import React from 'react';
import {Map,fromJS} from 'immutable';
const reducer = (state = Map() ,action) => {
switch(action.type){
case 'SET_STATE': return state.merge(action.state);
default:
return state;
}
}
export default reducer;
添加默认语句将解决问题:)
我也在这里结束了,因为我没有将我的 rootreducer 函数传递给我的createStore
方法。 我有:
const store = createStore(applyMiddleware(...middlewares));
我需要:
const store = createStore(rootReducer(), applyMiddleware(...middlewares));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.