Posso mapDispatchToProps sem mapStateToProps no Redux?


92

Estou quebrando o exemplo de tarefas do Redux para tentar entendê-lo. Eu li que mapDispatchToPropspermite mapear ações de despacho como adereços, então pensei em reescrever addTodo.jspara usar mapDispatchToProps em vez de chamar dispatch (addTodo ()). Eu chamei addingTodo(). Algo assim:

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

No entanto, quando eu executar o aplicativo, eu recebo este erro: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Eu nunca mapStateToPropscomecei com o componente AddTodo, então não tinha certeza do que estava errado. Minha intuição diz que connect()espera mapStateToPropspreceder mapDispatchToProps.

O original de trabalho tem a seguinte aparência:

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

O repo completo pode ser encontrado aqui .

Então, minha pergunta é, é possível fazer mapDispatchToProps sem mapStateToProps? O que estou tentando fazer é uma prática aceitável - se não, por que não?

Respostas:


144

Sim você pode. Basta passar nullcomo primeiro argumento:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Sim, não é apenas uma prática aceitável, é uma forma recomendada de desencadear ações. Usar mapDispatchToPropspermite esconder o fato de usar redux dentro de seus componentes de reação


6
Mas posso usar mapStateToProps sem mapDispatchToProps da mesma maneira?
Velizar Andreev Kitanov

6
@VelizarAndreevKitanov sim
iofjuupasli

22
Ao usar apenas mapStateToProps, pode-se omitir o segundo argumento para connect. Não é necessário passarnull
theUtherSide

1
Para o caso inverso, mapStateToProps sem mapDispatchToProps, não há necessidade de transmitir null. passar apenas mapStateToProps
Rajesh Nasit

2
connectdeveria ter aceito um literal de objeto como parâmetro em vez de lista de argumentos.
Mahdi Pedram
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.