bindActionCreators(actionCreators, dispatch)

Преобразует объект, значениями которого являются генераторы действий, в объект с теми же ключами, но с каждым генератором действий, обернутым в вызов dispatch, чтобы их можно было вызывать непосредственно.

Обычно вы должны просто вызывать dispatch напрямую на вашем экземпляре Store. Если вы используете Redux с React, react-redux предоставит вам функцию dispatch, чтобы вы могли вызывать её напрямую.

Единственный случай использования bindActionCreators — когда вы хотите передать некоторые генераторы действий в компонент, который не знает о Redux, и вы не хотите передавать dispatch или хранилище Redux.

Для удобства вы также можете передать одну функцию в качестве первого аргумента и получить функцию в качестве возвращаемого значения.

Параметры

1. actionCreators (Функция или Объект): генератор действия или объект, значениями которого являются генераторы действий.

2. dispatch (Функция): Функция dispatch, доступная в экземпляре Store.

Возвращаемое значение

(Функция или Объект): Объект, имитирующий исходный объект, но с каждой функцией, немедленно отправляющей действие, возвращённое соответствующим генератором действия. Если вы передали функцию в качестве actionCreators, возвращаемое значение также будет единственной функцией.

Пример

TodoActionCreators.js

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

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

SomeComponent.js

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

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

class TodoListContainer extends Component {
  componentDidMount() {
    // Injected by react-redux:
    let { dispatch } = this.props

    // 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)
  }

  render() {
    // Injected by react-redux:
    let { todos, dispatch } = this.props

    // Here's a good use case for bindActionCreators:
    // You want a child component to be completely unaware of Redux.

    let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)
    console.log(boundActionCreators)
    // {
    //   addTodo: Function,
    //   removeTodo: Function
    // }

    return <TodoList todos={todos} {...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)

Рекомендации

• Вы можете спросить: почему мы не свяжем генераторы действий с экземпляром хранилища сразу, как в классическом Flux? Проблема в том, что это не будет хорошо работать с универсальными приложениями, которым нужно отображаться на сервере. Скорее всего, вы хотите иметь отдельный экземпляр хранилища на запрос, чтобы вы могли подготовить их с разными данными, но привязка генераторов действий во время их определения означает, что вы застрянете с одним экземпляром хранилища для всех запросов.

• Если вы используете ES5, вместо import * as синтаксиса вы можете просто передать require('./TodoActionCreators') в bindActionCreators в качестве первого аргумента. Единственное, что его интересует, это то, что значения аргументов actionCreators являются функциями. Система модулей не имеет значения.