fonction de répartition dans redux-réagir

Je suis étudiant réagir et j'ai un exemple comme ceci

//index.js
const store = createStore(reducer)
render(
  <Provider store={store}>
    <AddTodo />
  </Provider>,
  document.getElementById('root')
)

//Apptodo.js
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
    .......

Pourquoi ne pas this.pros.store mais il suffit d'appeler le dispatch() fonction ?

EDIT: Comment est-il extrait de la dispatch de this.pros. Ce n'est pas l'objet this.pros.store ? et dans ce cas pourquoi ne pas simplement extraire store ?

Merci.

Je crois que vous êtes l'amalgame entre les concepts des deux de Réagir et de Redux. Les accessoires sont ce que vous obtenez Réagir avec les composants. Le Redux magasin n'est pas liée d'une quelconque façon. réagir-redux est la connexion entre eux, rendant plus facile pour vous de l'expédition d'actions à l'aide Redux de la méthode de magasin, dispatch(). réagir-redux pouvez également faire de la banque d'état disponibles comme accessoires, en passant par une fonction comme premier argument de l'appel à connect() découvrez la réaction redux docs pour plus d'informations.
Merci, je vais vérifier cela

OriginalL'auteur Quoc-Hao Tran | 2017-03-18

  1. 9

    Votre addTodo composant a accès à la boutique de l'état et des méthodes(e.g, d'expédition, de getState, etc). Donc, quand vous avez signé votre Réagissent avec le Redux store via le connect méthode, vous avez eu accès à la boutique d'etat et de méthodes.

    ({ dispatch }) est tout simplement à l'aide de JS déstructuration de cession pour extraire dispatch de this.props objet.

    merci, je vais lire à ce sujet, mais pourquoi voulons-nous pour en extraire l'expédition ? n'est-il pas suffisant pour extraire magasin ?
    Vous ne pouvez pas extraire le magasin. réagir-redux 's Fournisseur de la composante fait de l'ensemble de la redux magasin à la disposition des composants dans la hiérarchie ci-dessous via le se connecter de la méthode. Ainsi, le composant a la store's des méthodes et de l'état fusionné dans ses accessoires. Pour accéder à dispatch , il peut y accéder par le biais de this.props.dispatch.

    OriginalL'auteur Rowland

  2. 15

    réagir-redux est la bibliothèque c'est le passage de ces méthodes à votre composant comme accessoires.

    dispatch() est la méthode utilisée pour l'expédition des actions et de déclencher des modifications de l'état à la banque. réagir-redux est tout simplement d'essayer de vous faciliter l'accès.

    Noter, cependant, que l'expédition n'est pas disponible sur les accessoires si vous ne passer dans les actions de votre fonction de connexion. En d'autres termes, dans le code ci-dessous, depuis que je suis de passage someAction pour vous connecter, dispatch() n'est plus disponible sur les accessoires.

    L'avantage de cette approche, cependant, est que vous avez maintenant la "connecté" action disponible sur votre accessoires qui seront automatiquement envoyé pour vous lorsque vous l'appelez.

    import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { someAction } from '../myActions';

const MyComponent = (props) => {
  //someAction is automatically dispatched for you
  //there is no need to call dispatch(props.someAction());
  props.someAction();
};

export default connect(null, { someAction })(MyComponent);

    Ou si nous devions utiliser objet déstructuration comme illustré dans l'exemple que vous donnez...

    const MyComponent = ({ someAction }) => {
  someAction();
};

    Il est important de noter, cependant, que vous devez invoquer l'connectés action disponible sur les accessoires. Si vous avez essayé d'invoquer uneaction(), vous pourriez être en invoquant le raw, importé d'action — pas connecté d'action disponible sur les accessoires. L'exemple donné ci-dessous PAS de mise à jour de la boutique.

    const MyComponent = (props) => {
  //we never destructured someAction off of props
  //and we're not invoking props.someAction
  //that means we're invoking the raw action that was originally imported
  //this raw action is not connected, and won't be automatically dispatched
  someAction();
};

    Il s'agit d'un bug que les gens courent dans tous les temps lors de l'utilisation de réagir-redux. Suivant eslint est pas de faire de l'ombre à la règle peut vous aider à éviter cet écueil.

    Manque un '}'const MyComponent = ({ someAction ) => {?
    Corrigé, merci!

    OriginalL'auteur jabacchetta