Kann ich mapDispatchToProps ohne mapStateToProps in Redux?


91

Ich zerlege Redux 'ToDo-Beispiel, um zu versuchen, es zu verstehen. Ich habe gelesen, mapDispatchToPropsdass Sie damit Versandaktionen als Requisiten addTodo.jszuordnen können. Daher habe ich mir überlegt, neu zu schreiben , um mapDispatchToProps zu verwenden, anstatt dispatch (addTodo ()) aufzurufen. Ich habe es genannt addingTodo(). Etwas wie das:

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

Wenn ich die App ausführe, wird jedoch folgende Fehlermeldung angezeigt : Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Ich habe nie mapStateToPropsmit der AddTodo-Komponente begonnen, daher war ich mir nicht sicher, was falsch war. Mein Bauchgefühl sagt, dass connect()erwartet wird mapStateToProps, vorauszugehen mapDispatchToProps.

Das funktionierende Original sieht folgendermaßen aus:

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

Das komplette Repo finden Sie hier .

Meine Frage ist also, ist es möglich, mapDispatchToProps ohne mapStateToProps auszuführen? Ist das, was ich versuche, eine akzeptable Praxis zu machen - wenn nicht, warum nicht?

Antworten:


141

Ja, du kannst. Übergeben Sie einfach nullals erstes Argument:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Ja, es ist nicht nur akzeptable Praxis, es wird empfohlen, Aktionen auszulösen. Mit "Verwenden" mapDispatchToPropskönnen Sie die Tatsache der Verwendung von Redux in Ihren Reaktionskomponenten verbergen


6
Aber kann ich mapStateToProps ohne mapDispatchToProps auf die gleiche Weise verwenden?
Velizar Andreev Kitanov

6
@ VelizarAndreevKitanov ja
iofjuupasli

20
Wenn nur verwendet wird mapStateToProps, kann das zweite Argument weggelassen werden connect. Es ist nicht notwendig zu bestehennull
theUtherSide

1
Für umgekehrte Groß- und Kleinschreibung müssen mapStateToProps ohne mapDispatchToProps keine Null übergeben. nur pass mapStateToProps
Rajesh Nasit

2
connectsollte ein Objektliteral als Parameter anstelle einer Liste von Argumenten akzeptiert haben.
Mahdi Pedram
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.