javascript pattern Puis-je mapDispatchToProps sans mapStateToProps dans Redux?



redux pattern (1)

Je brise l'exemple de Redux pour essayer de le comprendre. J'ai lu que mapDispatchToProps permet de mapper les actions de dispatch comme des accessoires, alors j'ai pensé à réécrire addTodo.js pour 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 Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo. l'application, le Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo. : Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo. . Je n'ai jamais utilisé mapStateToProps pour commencer avec le composant AddTodo, je ne savais donc pas ce qui n'allait pas. Mon instinct me dit que connect() s'attend à mapStateToProps que mapStateToProps 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é here .

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?


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 mapDispatchToProps





redux