javascript - react - redux js framework

El estado de redux no está definido en mapStateToProps

Question

Actualmente estoy siguiendo this tutorial. He encontrado un pequeño obstáculo que involucra a mapStateToProps en el siguiente código:

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;

Aquí está el componente de votación que se importa:

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;

Se supone que debe renderizar dos botones del pair prop. El prop de vote es una función que se ejecutará al hacer clic, hasVoted deshabilita los botones cuando verdadero y el ganador solo presenta el componente ganador como se muestra.

Se espera que el estado sea un mapa de JS inmutable que se vea así:

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

En su lugar, aparece un error que indica que el estado no está definido en la línea state.getIn.

El código que establece el estado está en el índice:

const store = createStore(reducer);

const socket = io(document.location.protocol + ''//'' + document.location.hostname + '':8090'');
socket.on(''state'', state => store.dispatch({
  type: ''SET_STATE'',
  state
}));

He registrado store.getState() después de la configuración y es como se esperaba pero undefined en mapStateToProps . También registré la variable de estado en el contexto anterior y también es como se esperaba.

También puse el estado normalmente y ¡sorprendentemente funciona !:

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

El valor del estado anterior es exactamente lo que se recibe del servidor.

Por último, esto es lo que parece mi reductor:

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;

¿Qué estoy haciendo mal?

EDIT: me di cuenta de que mapStateToProps no se llama después de store.dispatch() . mapStateToProps los docs por las posibles razones mapStateToProps que no se está llamando a mapStateToProps y no es una de ellas.

Answer 1

Su reductor no tiene una acción predeterminada en la instrucción de cambio. Es por eso que aunque mencionó el estado inicial en parámetros reductores, undefined se devuelve como estado inicial de almacenamiento

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;

Agregar la declaración por defecto solucionará el problema :)