web-dev-qa-db-fra.com

mapDispatchToProps: un point?

Je me demandais s'il y avait encore un point en utilisant mapDispatchToProps aujourd'hui. Je travaille sur les tutoriels de documentation redux (pour construire une liste de tâches) où VisibleTodoList est décrit comme:

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

Cependant, on m'a dit qu'aujourd'hui, je pouvais simplement ne pas définir mapDispatchToProps et tout connecter via:

const VisibleTodoList = connect(
  mapStateToProps,
  toggleTodo
)(TodoList)

Est ce juste? Et si oui, quel est l'intérêt d'écrire un mapDispatchToProps? Y a-t-il des inconvénients à retourner simplement l'action?

Merci!

reactjsreact-nativereduxreact-redux
16
Thanh-Quy Nguyen

Pour clarifier le commentaire de l'autre Mark:

Le deuxième argument de connect() peut prendre deux formes principales. Si vous passez une fonction comme argument, connect() suppose que vous voulez gérer vous-même la préparation de la répartition, appelle votre fonction avec dispatch comme argument et fusionne le résultat dans les accessoires de votre composant.

Si vous passez un objet comme deuxième argument à connect(), il suppose que vous lui avez donné une carte de noms d'accessoires aux créateurs d'actions, et il les exécute donc automatiquement tous via bindActionCreators utilitaire et utilise le résultat comme accessoire.

Cependant, passer un créateur d’action unique comme deuxième argument, comme votre exemple semble le faire, ne ferait pas ce que vous voulez, car connect() interpréterait cela comme une fonction de préparation et non comme un créateur d'action qui doit être lié.

Alors oui, connect() prend en charge une syntaxe abrégée de passage dans un objet plein de créateurs d'action comme deuxième argument, mais il existe toujours de bons cas d'utilisation pour passer dans une fonction mapDispatchToProps réelle pour faire des choses vous-même (surtout si votre préparation d'expédition repose sur les valeurs réelles des accessoires d'une manière ou d'une autre).

Vous voudrez peut-être vous référer à la documentation de l'API pour `connect () .

23
markerikson

connect () liera automatiquement la répartition à vos actions si elles sont transmises en tant qu'objet de noms de fonction.

Donc non, vous n'avez pas besoin d'implémenter mapStateToProps. Au lieu de cela, vous pouvez simplement passer des actions comme celle-ci:

export default connect((state) => state, {
  action1,
  action2,
})(MyComponent);
8
Mark