bindActionCreators(actionCreators, dispatch)

action creatorを値として持つObjectを引数としてとります。そのObjectの値であるaction craetorをaction creatorを実行して戻り値(action)をdispatchの引数として実行する関数(dispatch(actionCreator(args)))に置き換えます。(Objectのキーはそのまま)

(actionを適用する場合、)通常、直接Storeのdispatch関数を実行する必要があります。ReduxをReactと連携させる場合、react-reduxがdispatch関数を提供するので、(dispatch関数を)直に実行することができます。

唯一のbindActionCreatorsの使用例はdispatchやReduxのStoreをコンポーネントに渡すことなく、Reduxを意識せずコンポーネントにaction creatorを渡したい場合です。

第1引数にaction creatorを渡すと、それをdispatchでラップした関数(dispatch(actionCreator(args)))を返します。

Parameters

actionCreators (Function or Object): action creatorもしくはaction creatorを値に持つObject
dispatch (Function): Storeのdispatch関数

Returns

(Function or Object): 第1引数にObjectが渡された場合、そのObjectの値をラップしてObjectの値の実行結果であるactionを第2引数のdispatchに渡して実行する関数(dispatch(actionCreator(args)))に置き換えて返します。第1引数に関数が渡された場合、同様に関数をラップして返します。

Example

`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 {
  constructor(props) {
    super(props)

    const { dispatch } = props

    // 以下はbindActionCreatorsの使用例です。
    // 子コンポーネントにReduxを完全に意識させたくない場合、action creatorをdispatchにbindして子コンポーネントに渡します。

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

  componentDidMount() {
    // react-reduxよる注入
    let { dispatch } = this.props

    // 注意: これは動作しません。
    // TodoActionCreators.addTodo('Use Redux')

    // 単にaction createrを実行しているだけです。
    // actionをdispatchする必要があります。

    // これは動作します。
    let action = TodoActionCreators.addTodo('Use Redux')
    dispatch(action)
  }

  render() {
    // react-reduxよる注入
    let { todos } = this.props

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

    // bindActionCreatorsを使う代わりにdispatch関数を子コンポーネントに渡す方法があります。
    // しかし、子コンポーネントはaction creatorをimportして、それを意識する必要があります。

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

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

License

Japanese part

Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)

Other

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Redux

Redux Thunk

Lit