Подтвердить что ты не робот

Состояние Redux undefined в mapStateToProps

В настоящее время я следую этому учебнику. Я немного ударил с помощью 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;

Здесь импортируется компонент Voting:

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 prop. vote prop - это функция, которая будет выполняться при нажатии, hasVoted отключает кнопки, когда true и победитель только отображает компонент победителя, как показано.

Ожидается, что состояние будет неизменным JS-картой, которая выглядит так:

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

Вместо этого я получаю сообщение о том, что состояние undefined в строке 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;

Что я делаю неправильно?

EDIT: я понял, что mapStateToProps не вызывается после store.dispatch(). Я прошел через docs по возможным причинам mapStateToProps не вызывается, и он не один из них.

4b9b3361

Ответ 1

Редуктор не имеет действия по умолчанию в инструкции switch. Вот почему, хотя вы упомянули начальное состояние в параметрах редуктора, 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;

Добавление инструкции по умолчанию устранит проблему:)