web-dev-qa-db-ja.com

redux状態はmapStateToPropsで未定義です

私は現在 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プロパティから2つのボタンをレンダリングすることになっています。 vote propはクリック時に実行される関数です。hasVotedはtrueの場合ボタンを無効にし、winnerは示されているようにwinnerコンポーネントのみをレンダリングします。

状態は、次のような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()を記録しましたが、期待どおりですが、undefinedにmapStateToPropsがあります。また、上記のコンテキストで状態変数を記録しましたが、これも予想どおりです。

私も状態を正常に設定し、驚くほどうまくいきます！：

_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()の後に呼び出されないことに気付きました。 mapStateToPropsが呼び出されておらず、その1つでもないため、考えられる理由により docs を実行しました。

javascriptreactjsreduxreact-reduximmutable.js
23
esaminu

レデューサーには、switchステートメントにデフォルトのアクションがありません。そのため、reducer paramsで初期状態について言及したにもかかわらず、undefinedがストアの初期状態として返されます。

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;

デフォルトのステートメントを追加すると、問題が修正されます:)

45
Deadfish