bindActionCreators(actionCreators, dispatch)

Turns an object whose values are action creators, into an object with the same keys, but with every action creator wrapped into a dispatch call so they may be invoked directly.

Normally you should just call dispatch directly on your Store instance. If you use Redux with React, react-redux will provide you with the dispatch function so you can call it directly, too.

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.

For convenience, you can also pass an action creator as the first argument, and get a dispatch wrapped function in return.

Parameters

  • actionCreators (Function or Object): An action creator, or an object whose values are action creators.

  • dispatch (Function): A dispatch function available on the Store instance.

Returns

(Function or Object): An object mimicking the original object, but with each function immediately dispatching the action returned by the corresponding action creator. If you passed a function as actionCreators, the return value will also be a single function.

Example

TodoActionCreators.js

  1. export function addTodo(text) {
  2.   return {
  3.     type: 'ADD_TODO',
  4.     text
  5.   }
  6. }
  8. export function removeTodo(id) {
  9.   return {
  10.     type: 'REMOVE_TODO',
  11.     id
  12.   }
  13. }

SomeComponent.js

  1. import { Component } from 'react'
  2. import { bindActionCreators } from 'redux'
  3. import { connect } from 'react-redux'
  5. import * as TodoActionCreators from './TodoActionCreators'
  6. console.log(TodoActionCreators)
  7. // {
  8. //   addTodo: Function,
  9. //   removeTodo: Function
  10. // }
  12. class TodoListContainer extends Component {
  13.   constructor(props) {
  14.     super(props)
  16.     const { dispatch } = props
  18.     // Here's a good use case for bindActionCreators:
  19.     // You want a child component to be completely unaware of Redux.
  20.     // We create bound versions of these functions now so we can
  21.     // pass them down to our child later.
  23.     this.boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)
  24.     console.log(this.boundActionCreators)
  25.     // {
  26.     //   addTodo: Function,
  27.     //   removeTodo: Function
  28.     // }
  29.   }
  31.   componentDidMount() {
  32.     // Injected by react-redux:
  33.     let { dispatch } = this.props
  35.     // Note: this won't work:
  36.     // TodoActionCreators.addTodo('Use Redux')
  38.     // You're just calling a function that creates an action.
  39.     // You must dispatch the action, too!
  41.     // This will work:
  42.     let action = TodoActionCreators.addTodo('Use Redux')
  43.     dispatch(action)
  44.   }
  46.   render() {
  47.     // Injected by react-redux:
  48.     let { todos } = this.props
  50.     return <TodoList todos={todos} {...this.boundActionCreators} />
  52.     // An alternative to bindActionCreators is to pass
  53.     // just the dispatch function down, but then your child component
  54.     // needs to import action creators and know about them.
  56.     // return <TodoList todos={todos} dispatch={dispatch} />
  57.   }
  58. }
  60. export default connect(state => ({ todos: state.todos }))(TodoListContainer)

Tips

  • You might ask: why don't we bind the action creators to the store instance right away, like in classical Flux? The problem is that this won't work well with universal apps that need to render on the server. Most likely you want to have a separate store instance per request so you can prepare them with different data, but binding action creators during their definition means you're stuck with a single store instance for all requests.

  • If you use ES5, instead of import * as syntax you can just pass require('./TodoActionCreators') to bindActionCreators as the first argument. The only thing it cares about is that the values of the actionCreators properties are functions. The module system doesn't matter.