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中定義

回答

相關問題