web-dev-qa-db-fra.com

Puis-je mapDispatchToProps sans mapStateToProps dans Redux?

Je brise l'exemple de Redux pour essayer de le comprendre. J'ai lu que mapDispatchToProps vous permet de mapper les actions de dispatch comme des accessoires, alors j'ai pensé à la réécriture de addTodo.js afin d'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, lorsque je lance l'application, j'obtiens cette erreur: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Comme je n’avais jamais utilisé mapStateToProps au début sur le composant AddTodo, je n’étais pas sûr de ce qui ne va pas. Mon instinct me dit que connect() s'attend à ce que mapStateToProps précède 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 rapport complet peut être trouvé ici .

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

javascriptreactjsreduxreact-redux
61
Iggy

Oui, vous pouvez. Il suffit de passer null comme premier argument:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Oui, ce n'est pas seulement une pratique acceptable, c'est une façon recommandée de déclencher des actions. Utiliser mapDispatchToProps permet de cacher le fait d’utiliser redux dans vos composants réactifs

101
iofjuupasli