Redux状态未在mapStateToProps中定义

我目前正在关注this教程。我已经打了一下下面的代码涉及mapStateToProps一个障碍的：Redux状态未在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时禁用按钮，并且优胜者仅呈现赢家组件，如图所示。

状态预计将是一个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()，它是如预期，但在mapStateToPropsundefined。我也在上面的上下文中记录了状态变量，它也如预期的那样。

我还设置了状态正常，其令人惊讶的作品！：

store.dispatch({ 
    type: 'SET_STATE', 
    state: { 
    vote: { 
     pair: ['Movie A', 'Movie B'] 
    } 
    } 
});

上述状态的价值正是从服务器

最后，这里是我减速的外观收到这样的：

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没有被调用，它不是其中之一。

来源

2016-08-16 esaminu

我建议你添加'终极版，logger'到现有的中间件，以验证这些操作是否正确发送;它可以给我们一个更好的想法 – Deadfish

@Deadfish感谢您的建议。我使用了redux-logger，并且正在调度操作，虽然我不知道为什么之前的状态是未定义的，因为我的初始状态是空的Map。我也意识到，对于涉及服务器的那个，mapStateToProps在调度之后不会被调用。 – esaminu

我认为'mapStateToProps'不会在状态发生变化时被调用;但你的reducer代码看起来很好;你可以通过github或gist分享你的整个代码吗？它一定是错误的方式设置 – Deadfish

您减速器在switch语句中没有缺省操作。这就是为什么即使你提到在减速PARAMS初始状态，不确定的形式返回商店初始状态

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;

添加默认的语句将解决这个问题:)

来源

2016-08-18 17:42:18 Deadfish

修复它，谢谢！ – esaminu

Redux状态未在mapStateToProps中定义

回答

相关问题