Puis-je mapDispatchToProps sans mapStateToProps dans Redux?

92

Je brise l'exemple todo de Redux pour essayer de le comprendre. J'ai lu que cela mapDispatchToPropsvous permet de mapper les actions de répartition en tant qu'accessoires, j'ai donc pensé à réécrire addTodo.jspour utiliser mapDispatchToProps au lieu d'appeler dispatch (addTodo ()). Je l'ai appelé addingTodo(). Quelque chose comme ça:

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

let AddTodo = ({addingTodo}) => {
  let input;
  return (
      <div>
        <form onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          addingTodo(input.value)
          input.value = ""
        }}>
          <input ref={node => {
            input = node
          }} />
          <button type="submit">Submit</button>
        </form>
      </div>
  )
}

const mapDispatchToProps = {
  addingTodo: addTodo
}

AddTodo = connect(
  mapDispatchToProps
)(AddTodo)

export default AddTodo

Cependant, quand je lance l'application, je reçois cette erreur: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Je n'avais jamais l'habitude mapStateToPropsde commencer avec le composant AddTodo, donc je n'étais pas sûr de ce qui n'allait pas. Mon instinct dit que cela connect()devrait mapStateToPropsprécéder mapDispatchToProps.

L'original de travail ressemble à ceci:

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 = ""
        }}>
          <input ref={node => {
            input = node
          }} />
          <button type="submit">Submit</button>
        </form>
      </div>
  )
}

AddTodo = connect()(AddTodo)

export default AddTodo

Le repo complet peut être trouvé ici .

Ma question est donc la suivante: est-il possible de faire mapDispatchToProps sans mapStateToProps? Ce que j'essaie de faire est-il une pratique acceptable - sinon, pourquoi?

Iggy
la source

Réponses:

144

Oui, vous pouvez. Passez simplement nullcomme premier argument:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Oui, ce n'est pas seulement une pratique acceptable, c'est un moyen recommandé de déclencher des actions. Utiliser mapDispatchToPropspermet de masquer le fait d'utiliser redux dans vos composants react

iofjuupasli
la source
6
Mais puis-je utiliser mapStateToProps sans mapDispatchToProps de la même manière?
Velizar Andreev Kitanov
6
@VelizarAndreevKitanov yes
iofjuupasli
22
Lors de l'utilisation uniquement mapStateToProps, on peut omettre le deuxième argument de connect. Il n'est pas nécessaire de passernull
theUtherSide
1
Pour le cas inverse mapStateToProps sans mapDispatchToProps, il n'est pas nécessaire de passer null. seulement passer mapStateToProps
Rajesh Nasit
2
connectaurait dû accepter un objet littéral comme paramètre au lieu d'une liste d'arguments.
Mahdi Pedram