¿Puedo mapDispatchToProps sin mapStateToProps en Redux?


92

Estoy rompiendo todo el ejemplo de Redux para tratar de entenderlo. Leí que mapDispatchToPropste permite mapear acciones de despacho como accesorios, así que pensé en reescribir addTodo.jspara usar mapDispatchToProps en lugar de llamar a dispatch (addTodo ()). Lo llamé addingTodo(). Algo como esto:

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

Sin embargo, cuando ejecuto la aplicación, me sale este error: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Nunca solía mapStateToPropsempezar con el componente AddTodo, así que no estaba seguro de qué estaba mal. Mi instinto dice que connect()espera mapStateToPropspreceder mapDispatchToProps.

El original de trabajo se ve así:

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

El repositorio completo se puede encontrar aquí .

Entonces mi pregunta es, ¿es posible hacer mapDispatchToProps sin mapStateToProps? ¿Es lo que estoy tratando de hacer una práctica aceptable? Si no, ¿por qué no?

Respuestas:


144

Sí tu puedes. Simplemente pase nullcomo primer argumento:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Sí, no es solo una práctica aceptable, es una forma recomendada de desencadenar acciones. Usar mapDispatchToPropspermite ocultar el hecho de usar redux dentro de sus componentes react


6
Pero, ¿puedo usar mapStateToProps sin mapDispatchToProps de la misma manera?
Velizar Andreev Kitanov

6
@VelizarAndreevKitanov sí
iofjuupasli

22
Cuando se usa solo mapStateToProps, se puede omitir el segundo argumento de connect. No es necesario pasarnull
theUtherSide

1
Para mapStateToProps en caso inverso sin mapDispatchToProps no es necesario pasar nulo. solo pase mapStateToProps
Rajesh Nasit

2
connectdebería haber aceptado un objeto literal como parámetro en lugar de una lista de argumentos.
Mahdi Pedram
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.