我目前正在关注本教程。我遇到了一些涉及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道具渲染两个按钮。该voteprop是一项将在单击hasVoted时执行的功能,当为true时将禁用按钮,并且获胜者仅呈现如图所示的获胜者组件。
pair
vote
hasVoted
该状态应该是一个如下所示的immutableJS映射:
Map({ vote:{ pair:List.of('Movie A','Movie B') } });
相反,我收到一条错误消息,指出state.getIn行中的状态未定义。
设置状态的代码在索引中:
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()设置后我已登录,与预期相同,但undefined在中mapStateToProps。我还在上面的上下文中记录了状态变量,这也是预期的。
store.getState()
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()。我浏览了docs的原因可能mapStateToProps是没有被调用,也不是其中之一。
store.dispatch()
减速器在switch语句中没有默认操作。这就是为什么即使您在化简器参数中提到了初始状态,但undefined仍作为商店初始状态返回的原因
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;
添加默认语句将解决此问题:)