2016-08-16 13 views
13

私は現在thisチュートリアルに従っています。私は、次のコードでmapStateToPropsを伴うひっかかりのビットをヒットしました:pair小道具からの二つのボタンをレンダリングすることになっているmapStateToPropsでRedux状態は未定義です

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; 

:ここ

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; 

は、インポートの議決コンポーネントです。 vote小道具は、クリックすると実行される機能です。hasVotedは、trueの場合はボタンを無効にし、勝者は表示されているように勝者コンポーネントのみをレンダリングします。

Map({ 
    vote:{ 
    pair:List.of('Movie A','Movie B') 
    } 
}); 

は、代わりに私は状態がstate.getInラインで定義されていないというエラーを取得しています:

状態は次のようになりますimmutableJSマップとして期待されています。

状態を設定するコードがインデックスである:

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; 

私は間違っていますか?

編集:mapStateToPropsstore.dispatch()の後に呼び出されていないことを認識しました。可能性のある理由でdocsに行きました。mapStateToPropsは呼び出されていません。その1つではありません。

+0

を修正するデフォルトのステートメントを追加

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; 

ストア初期状態として返される私はあなたがReduxの-logger' '追加提案しますアクションが適切に派遣されているかどうかを確認する既存のミドルウェアそれは私たちに良いアイデアを与えることができる – Deadfish

+0

@Deadfish提案のおかげで。私はredux-loggerを使用していますが、アクションは正しくディスパッチされていますが、私の初期状態は空のマップなので、前の状態がなぜ定義されていないのか分かりません。私はまた、サーバーに関係するものについては、ディスパッチ後にmapStateToPropsが呼び出されないことに気付きました。 – esaminu

+0

私は 'mapStateToProps'が状態が突然変異したときに呼び出されないと思います。あなたのレジューサーコードは上手く見えます。あなたはgithubまたは要点を通してあなたの全体のコードを共有することができますか? @Deadfish確かに、[サーバー](https://github.com/esaminu/redux-voting-server)と[クライアント](https://github.com/)は、設定された方法で何かが間違っていたはずです – Deadfish

答えて

19

還元剤にはswitch文にデフォルトのアクションがありません。あなたが減速機のparamsでの初期状態を言及していても理由である、未定義の問題:)

+1

それを修正しました、ありがとう! – esaminu

関連する問題