Czy mogę mapDispatchToProps bez mapStateToProps w Redux?

95

Rozbijam przykład todo Reduxa, aby spróbować go zrozumieć. Czytałem, że mapDispatchToPropspozwala ci mapować akcje wysyłkowe jako rekwizyty, więc pomyślałem o przepisaniu, addTodo.jsaby użyć mapDispatchToProps zamiast wywoływania dispatch (addTodo ()). Nazwałem to addingTodo(). Coś takiego:

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

Jednak po uruchomieniu aplikacji, otrzymuję ten błąd: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Nigdy nie mapStateToPropszaczynałam od komponentu AddTodo, więc nie byłam pewna, co jest nie tak. Moje przeczucie mówi, że connect()spodziewa się , że mapStateToPropsto nastąpi mapDispatchToProps.

Działający oryginał wygląda następująco:

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

Pełne repozytorium można znaleźć tutaj .

Więc moje pytanie brzmi, czy możliwe jest wykonanie mapDispatchToProps bez mapStateToProps? Czy to, co próbuję zrobić, jest akceptowalną praktyką - jeśli nie, to dlaczego nie?

Iggy
źródło

Odpowiedzi:

145

Tak, możesz. Po prostu podaj nulljako pierwszy argument:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Tak, to nie tylko akceptowalna praktyka, ale zalecany sposób wywoływania działań. Używanie mapDispatchToPropspozwala ukryć fakt używania reduxu wewnątrz twoich komponentów reakcyjnych

iofjuupasli
źródło
6
Ale czy mogę używać mapStateToProps bez mapDispatchToProps w ten sam sposób?
Velizar Andreev Kitanov
6
@VelizarAndreevKitanov yes
iofjuupasli
23
Używając tylko mapStateToProps, można pominąć drugi argument do connect. Nie trzeba zdawaćnull
theUtherSide
1
W przypadku mapStateToProps odwróconych wielkości liter bez mapDispatchToProps nie ma potrzeby przekazywania wartości null. tylko przejdź mapStateToProps
Rajesh Nasit
2
connectpowinien zaakceptować literał obiektu jako parametr zamiast listy argumentów.
Mahdi Pedram