Redux de l'état n'est pas défini dans mapStateToProps

Je suis en train de faire des cette tutoriel. J'ai touché un peu d'un 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;

Ici est le Vote de la composante importée:

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 les deux boutons de la pair prop. Le vote prop est une fonction qui sera exécutée sur un clic, hasVoted désactive les boutons lorsque la valeur est true et gagnant le rend seulement le vainqueur comme indiqué.

L'état est censé être un immutableJS carte qui ressemble à ceci:

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

Au lieu de cela, je reçois un message d'erreur indiquant que l'état n'est pas défini dans l'état.getIn ligne.

Le réglage du code de l'état se trouve 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 connecté store.getState()après le réglage, et c'est comme prévu, mais undefined dans mapStateToProps. J'ai aussi enregistré la variable d'état dans le contexte ci-dessus, et c'est également comme prévu.

J'ai aussi définir l'état normalement et étonnamment fonctionne!:

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 par le serveur

Enfin voici ce que mon réducteur ressemble:

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;

Ce que je fais mal?

EDIT: j'ai réalisé que mapStateToProps n'est pas appelé après la store.dispatch(). Je suis passé par la docs pour les raisons possibles mapStateToProps n'est pas appelé et il n'est pas l'un d'eux.

je vous suggère d'ajouter redux-logger existants middlewares pour vérifier si les actions sont correctement distribué ou non; cela pourrait nous donner une meilleure idée
Merci pour la suggestion. J'ai utilisé redux-enregistreur, et l'action est correctement distribué bien que je ne sais pas pourquoi l'état antérieur est pas défini depuis mon état initial est une Carte vide. J'ai aussi réalisé que pour l'un impliquant le serveur, mapStateToProps n'est pas appelé après l'expédition.
je pense que le mapStateToProps n'est pas appelé lorsque l'état est muté; mais votre réducteur de code a l'air bien; pourriez-vous partager la totalité de votre code via github ou gist; quelque chose doit avoir été de mal avec la façon dont il a été le programme d'installation
Bien sûr, serveur et la client

OriginalL'auteur esaminu | 2016-08-16

  1. 33

    Vous réducteur de ne pas avoir une action par défaut dans l'instruction switch. C'est pourquoi, même si vous avez mentionné l'état initial dans réducteur params, indéfini est retourné en tant que magasin de l'état initial

    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ésoudre le problème 🙂

    Qu'il fixe, merci!

    OriginalL'auteur