Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

bindActionCreators(actionCreators, dispatch)

Resumen

Convierte un objeto cuyos valores son creadores de acciones, en un objeto con las mismas claves, pero con cada creador de acciones envuelto en una llamada a dispatch para que puedan invocarse directamente.

Normalmente, deberías llamar directamente a dispatch en tu instancia de Store. Si usas Redux con React, react-redux te proporcionará la función dispatch para que también puedas llamarla directamente.

El único caso de uso para bindActionCreators es cuando quieres pasar creadores de acciones a un componente que no conoce Redux, y no quieres pasarle dispatch ni la store de Redux.

Por comodidad, también puedes pasar un único creador de acciones como primer argumento y obtener una función envuelta en dispatch como resultado.

Advertencia

Este método se diseñó originalmente para usarse con el método heredado connect de React-Redux. Todavía funciona, pero rara vez es necesario.

Parámetros

1. actionCreators (Función u Objeto): Un creador de acciones, o un objeto cuyos valores son creadores de acciones.

2. dispatch (Función): Función dispatch disponible en la instancia de Store.

Devuelve

(Función u Objeto): Un objeto que imita al original, pero donde cada función despacha inmediatamente la acción devuelta por su creador de acciones correspondiente. Si pasaste una función como actionCreators, el resultado será también una única función.

Ejemplo

TodoActionCreators.js

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}

SomeComponent.js

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import * as TodoActionCreators from './TodoActionCreators'
console.log(TodoActionCreators)
// {
//   addTodo: Function,
//   removeTodo: Function
// }

function TodoListContainer(props) {
  // Injected by react-redux:
  const { dispatch, todos } = props

  // Here's a good use case for bindActionCreators:
  // You want a child component to be completely unaware of Redux.
  // We create bound versions of these functions now so we can
  // pass them down to our child later.

  const boundActionCreators = useMemo(
    () => bindActionCreators(TodoActionCreators, dispatch),
    [dispatch]
  )
  console.log(boundActionCreators)
  // {
  //   addTodo: Function,
  //   removeTodo: Function
  // }

  useEffect(() => {
    // Note: this won't work:
    // TodoActionCreators.addTodo('Use Redux')

    // You're just calling a function that creates an action.
    // You must dispatch the action, too!

    // This will work:
    let action = TodoActionCreators.addTodo('Use Redux')
    dispatch(action)
  }, [])

  return <TodoList todos={todos} {...this.boundActionCreators} />

  // An alternative to bindActionCreators is to pass
  // just the dispatch function down, but then your child component
  // needs to import action creators and know about them.

  // return <TodoList todos={todos} dispatch={dispatch} />
}

export default connect(state => ({ todos: state.todos }))(TodoListContainer)