Posso mapDispatchToProps senza mapStateToProps in Redux?


92

Sto rompendo l'esempio di Redux todo per cercare di capirlo. Ho letto che mapDispatchToPropsti consente di mappare le azioni di invio come oggetti di scena, quindi ho pensato di riscrivere addTodo.jsper utilizzare mapDispatchToProps invece di chiamare dispatch (addTodo ()). L'ho chiamato addingTodo(). Qualcosa come questo:

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

Tuttavia, quando si esegue l'applicazione, ottengo questo errore: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Non ho mai mapStateToPropsiniziato con il componente AddTodo, quindi non ero sicuro di cosa fosse sbagliato. Il mio istinto dice che connect()dovrebbe mapStateToPropsprecedere mapDispatchToProps.

L'originale funzionante ha questo aspetto:

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

Il repo completo può essere trovato qui .

Quindi la mia domanda è: è possibile eseguire mapDispatchToProps senza mapStateToProps? Quello che sto cercando di fare è una pratica accettabile - se no, perché no?

Risposte:


144

Si, puoi. Passa nullcome primo argomento:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Sì, non è solo una pratica accettabile, è un modo consigliato per attivare le azioni. L'utilizzo mapDispatchToPropsconsente di nascondere il fatto di utilizzare redux all'interno dei componenti reagire


6
Ma posso usare mapStateToProps senza mapDispatchToProps allo stesso modo?
Velizar Andreev Kitanov

6
@VelizarAndreevKitanov yes
iofjuupasli

22
Quando si usa solo mapStateToProps, si può omettere il secondo argomento a connect. Non è necessario passarenull
theUtherSide

1
Per mapStateToProps in caso inverso senza mapDispatchToProps non è necessario passare null. passa solo mapStateToProps
Rajesh Nasit

2
connectavrebbe dovuto accettare un oggetto letterale come parametro invece di un elenco di argomenti.
Mahdi Pedram
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.