Javascript 在 mapStateToProps 中未定义 Redux 状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38976134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redux state is undefined in mapStateToProps
提问by esaminu
I am currently following thistutorial. I've hit a bit of a snag involving mapStateToPropsin the following code:
我目前正在关注本教程。我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;
Here is the Voting component that's imported:
这是导入的投票组件：
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;
It is supposed to render two buttons from the pairprop. The voteprop is a function that will be executed on click, hasVoteddisables buttons when true and winner only renders the winner component as shown.
它应该从pair道具渲染两个按钮。该vote道具是将上点击执行的功能，hasVoted真正当禁用按钮和获奖者只呈现赢家组件，如图所示。
The state is expected to be an immutableJS map that looks like this:
状态应该是一个不可变的JS映射，如下所示：
Map({
vote:{
pair:List.of('Movie A','Movie B')
}
});
Instead I am getting an error saying that state is undefined in the state.getIn line.
相反，我收到一条错误消息，指出 state.getIn 行中的 state 未定义。
The code setting the state is in index:
设置状态的代码在索引中：
const store = createStore(reducer);
const socket = io(document.location.protocol + '//' + document.location.hostname + ':8090');
socket.on('state', state => store.dispatch({
type: 'SET_STATE',
state
}));
I have logged store.getState()after setting and it is as expected but undefinedin mapStateToProps. I also logged the state variable in above context and it's also as expected.
我已store.getState()在设置后登录，并且符合预期，但undefined在mapStateToProps. 我还在上面的上下文中记录了状态变量，它也符合预期。
I also set the state normally and it surprisingly works!:
我也正常设置了状态，它出人意料地有效！：
store.dispatch({
type: 'SET_STATE',
state: {
vote: {
pair: ['Movie A', 'Movie B']
}
}
});
The value of state above is exactly what is received from the server
上面 state 的值正是从服务器收到的
Lastly here's what my reducer looks like:
最后这是我的减速器的样子：
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;
What am I doing wrong?
我究竟做错了什么？
EDIT: I realised that mapStateToPropsis not being called after the store.dispatch(). I went through the docsfor the possible reasons mapStateToPropsis not being called and it's not one of them.
编辑：我意识到mapStateToProps在store.dispatch(). 我浏览了文档，可能的原因mapStateToProps是没有被调用，而且它不是其中之一。
回答by Deadfish
You reducer doesn't have a default action in switch statement. Which is why even though you mentioned the initial state in reducer params, undefined is returned as store initial state
您的减速器在 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;
Adding the default statement will fix the issue :)
添加默认语句将解决问题:)
