web-dev-qa-db-fra.com

L'état Redux n'est pas défini dans mapStateToProps

Je suis actuellement this tutorial. J'ai rencontré un petit problème impliquant mapStateToProps dans le code suivant:

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;

Voici le composant de vote importé:

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;

Il est censé rendre deux boutons à partir de l'accessoire pair. Le vote prop est une fonction qui sera exécutée au clic, hasVoted désactive les boutons lorsque true et gagnant rend uniquement le composant gagnant comme indiqué.

L'État devrait être une carte JS immuable qui ressemble à ceci:

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

Au lieu de cela, je reçois une erreur indiquant que cet état n'est pas défini dans la ligne state.getIn.

Le code définissant l'état est dans l'index:

const store = createStore(reducer);

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

J'ai enregistré store.getState() après le réglage et c'est comme prévu mais undefined dans mapStateToProps. J'ai également enregistré la variable d'état dans le contexte ci-dessus et c'est aussi comme prévu.

J'ai également réglé l'état normalement et cela fonctionne étonnamment!:

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

La valeur de l'état ci-dessus est exactement ce qui est reçu du serveur

Enfin, voici à quoi ressemble mon réducteur:

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'est-ce que je fais mal?

EDIT: J'ai réalisé que mapStateToProps n'est pas appelé après la store.dispatch(). J'ai parcouru le docs pour les raisons possibles mapStateToProps n'est pas appelé et ce n'est pas l'un d'eux.

javascriptreactjsreduxreact-reduximmutable.js
23
esaminu

Votre réducteur n'a pas d'action par défaut dans l'instruction switch. C'est pourquoi même si vous avez mentionné l'état initial dans les paramètres du réducteur, undefined est retourné comme état initial du magasin

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;

L'ajout de l'instruction par défaut résoudra le problème :)

45
Deadfish