bindActionCreators(actionCreators, dispatch)

    Normally you should just call dispatch directly on your instance. If you use Redux with React, react-redux will provide you with the 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.

    Parameters

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

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

    Returns

    Example

    TodoActionCreators.js

    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)
    15.     const { dispatch } = props
    17.     // Here's a good use case for bindActionCreators:
    18.     // You want a child component to be completely unaware of Redux.
    19.     // We create bound versions of these functions now so we can
    20.     // pass them down to our child later.
    22.     this.boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)
    23.     console.log(this.boundActionCreators)
    24.     // {
    25.     //   addTodo: Function,
    26.     //   removeTodo: Function
    27.     // }
    28.   }
    30.   componentDidMount() {
    31.     // Injected by react-redux:
    32.     let { dispatch } = this.props
    34.     // Note: this won't work:
    35.     // TodoActionCreators.addTodo('Use Redux')
    37.     // You must dispatch the action, too!
    39.     // This will work:
    40.     let action = TodoActionCreators.addTodo('Use Redux')
    41.     dispatch(action)
    42.   }
    44.   render() {
    45.     // Injected by react-redux:
    46.     let { todos } = this.props
    48.     return <TodoList todos={todos} {...this.boundActionCreators} />
    50.     // An alternative to bindActionCreators is to pass
    51.     // just the dispatch function down, but then your child component
    52.     // needs to import action creators and know about them.
    54.     // return <TodoList todos={todos} dispatch={dispatch} />
    55.   }
    56. }
    58. export default connect(state => ({ todos: state.todos }))(TodoListContainer)

    Tips

    • 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.