Pourquoi mes accessoires `undefined` lors de l'utilisation de redux et react.js?

J'ai essayé d'ajouter un état à mon application que vous venez d'enregistrer un booléen quand un événement est passé. Je ne peux pas comprendre ce que je fais mal ici.

Réducteur:

import * as actionTypes from '../constants/action-types.js';

const initialState = [{
  eventPassed: false
}];

export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return true;
    default:
      return state;
  }
}

Action:

import * as actionTypes from '../constants/action-types';

export function eventPassed(eventPassed) {
  return {
    type: actionTypes.EVENT_PASSED,
    payload: { eventPassed: eventPassed }
  };
}

Conteneur autour de composant:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Example from '../components/example.jsx';
import { eventPassed } from '../actions/app-actions';

class ExampleContainer extends Component {
  render() {
    return (
      <Example {...this.props} />
    );
  }
}

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({
    eventPassed
  }, dispatch)
});

const mapStateToProps = (state) => ({
  eventPassed: state.eventPassed
});

export default connect(mapStateToProps, mapDispatchToProps)(ExampleContainer);

Composant:

import React, { Component, PropTypes } from 'react';

class Example extends Component {

  constructor() {
    super();
    this.action = this.action.bind(this);
  }

  componentDidMount() {
    this.props.actions.eventPassed(true);
  }

  action() {
    console.log(this.props.eventPassed);
  }

  render() {
    return (
      <div>
        <button onClick={this.action}>Action</button>
      </div>
    );
  }
}

export default Example;

Quand j'essaie de me connecter ".accessoires de jeu.eventPassed" dans le <Example /> composant qu'il me donne "undefined". Est-il quelque chose qui manque? Ce qui semble être la plus simple l'utilisation de la boutique en redux.

Votre réducteur doit retourner à l'état d'objet, dans votre cas, {eventPassed: true}
Il n'est pas présent.accessoires de jeu.eventPassed sur le <Example /> composant. Voir ma réponse ci-dessous
Édité ma réponse pour être plus lisible

OriginalL'auteur Jim Peeters | 2016-11-16

  1. 9

    Pourquoi est-ce.accessoires de jeu.eventPassed connecté en tant que "undefined"?:

    La fonction action (eventPassed) vous tentez d'accéder à ce stade, il n'existe pas this.props.actions.eventPassed. Il
    en fait n'existe que sur this.props.actions.

    C'est parce que vous tenu de la méthode d'action pour la valeur 'actions'
    dans votre mapDispatchToProps. Cette offre donne accès à la
    eventPassed action via this.props.actions.

    Depuis cette.accessoires de jeu.les actions de points à eventPassed, en essayant d'accès
    this.props.actions.eventPassed vous essayez d'accéder à la propriété
    de "eventPassed' sur l'action eventPassed. Le résultat est que lorsque
    vous vous connectez pour cette propriété, vous recevez "undefined"

    D'autres modifications nécessaires:

    mapDispatchToProps doit renvoyer une valeur

    Un la flèche de la fonction avec un bloc de corps ne retourne pas automatiquement une valeur et, par conséquent, on doit être défini. Donc, votre fonction doit ressembler à:

    mapDispatchToProps = (dispatch) => {
  return { actions: bindActionCreators(eventPassed, dispatch) }
}

    État Initial est un tableau contenant un objet:

    const initialState = [{
  eventPassed: false
}];

    Puisque vous essayez de référence plus tard comme un object { eventPassed: true} et non pas un tableau d'objets [ { eventPassed: true } ] il devrait être:

    const initialState = {
  eventPassed: false
};

    Le réducteur doit passer de nouveau la mise à jour correcte (mais mutées) état: 

    export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return {
        ...state,
        eventPassed: action.payload
      };
    default:
      return state;
  }
}

    Ce que vous étiez d'abord à faire était de retour d'un état qui n'était plus un objet (ou, dans le cas original d'un tableau d'objet), mais seulement la valeur de true

    Re-lecture de docs, encore et encore, re-regardant des tutoriels, en regardant d'autres peuples code, les jours de la sueur, et ce post a eu la réponse à mon problème: "l'état Initial est un tableau contenant un objet", souhaite que je pourrais upvote ce x100.
    Content que vous avez trouvé utile!
    plus un pour la flèche de fonctions, permet d'économiser beaucoup de temps

    OriginalL'auteur Pineda

  2. 1

    Dans votre reducer vous initialisez votre état avec l'ensemble de l'objet a eventPassed de la propriété, en attendant de vous renvoyer simplement le booléen et ce n'est pas juste, parce que c'remplacer l'état initial, de sorte que le initState pourrait être juste un objet de la tenue de la boolean, et vous devez retourner à l'état basé sur la payload envoyé avec l'action dispathed être comme suit:

    import * as actionTypes from '../constants/action-types.js';

const initialState = {
  eventPassed: false
};

export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return {
        ...state,
        eventPassed: action.payload
      };
    default:
      return state;
  }
}

    Aussi, dans votre component vous pouvez avoir besoin de changer:

    this.props.eventPassed à this.props.actions.eventPassed

    OriginalL'auteur Basim Hennawi