web-dev-qa-db-fra.com

Fonction de répartition dans React-Redux

J'étudie réagit et j'ai un exemple comme celui-ci

//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 n'a-t-il pas eu this.pros.store mais appelez simplement la fonction dispatch ()?

EDIT: Comment extraire le dispatch de this.pros. L'objet n'est-il pas this.pros.store? et dans ce cas, pourquoi n'extrayons-nous pas simplement store?

Merci.

javascriptreactjsecmascript-6react-redux
22
Quoc-Hao Tran

Votre composant addTodo a accès à l'état et aux méthodes du magasin (par exemple, dispatch, getState, etc.). Ainsi, lorsque vous avez branché votre vue React avec le magasin Redux via la méthode connect, vous avez accès à l’état et aux méthodes du magasin.

({ dispatch }) utilise simplement JS affectation de déstructuration pour extraire dispatch de this.props objet.

17
Rowland

react-redux est la bibliothèque qui transmet ces méthodes à votre composant sous forme d'accessoires.

dispatch () est la méthode utilisée pour envoyer des actions et déclencher des changements d'état dans le magasin. react-redux essaie simplement de vous en donner un accès pratique.

Notez cependant que la répartition n'est pas disponible sur les accessoires si vous transmettez des actions à votre fonction de connexion. En d'autres termes, dans le code ci-dessous, puisque je passe someAction pour me connecter, dispatch() n'est plus disponible sur les accessoires.

L’avantage de cette approche, cependant, est que vous disposez maintenant de l’action "connecté" sur vos accessoires qui sera automatiquement expédiée lors de votre appel. il.

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 utilisions déstructuration d'objet comme indiqué dans l'exemple que vous donnez ...

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

Il est toutefois important de noter que vous devez invoquer l'action connectée disponible sur les accessoires. Si vous tentiez d'appeler someAction (), vous invoqueriez l'action importée brute - et non l'action connectée disponible sur les accessoires. L'exemple ci-dessous va NE PAS mettre à jour le magasin .

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 courant que les gens rencontrent tout le temps lorsqu'ils utilisent react-redux. En suivant la règle de non-ombrage d'eslint peut vous aider à éviter ce piège.

18
jabacchetta