我目前正在学习this个教程.我在下面的代码中遇到了一个小问题,涉及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
props 上的两个按钮.vote
props 是一个单击即可执行的功能,如果为true,hasVoted
将禁用按钮,winner仅呈现winner组件,如图所示.
该状态应该是一个不可变的JS映射,如下所示:
Map({
vote:{
pair:List.of('Movie A','Movie B')
}
});
相反,我得到了一个错误,说状态在状态中是未定义的.排队.
设置状态的代码位于索引中:
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
次.我还在上面的上下文中记录了state变量,它也是预期的.
我还将状态设置为正常状态,它出人意料地有效!:
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;
我做错了什么?
编辑:我意识到在store.dispatch()
之后没有人叫mapStateToProps
.我看了docs个,可能是因为mapStateToProps
没有被调用,而且它不是其中之一.