`bindActionCreators(actionCreators, dispatch)`

概要

値がアクションクリエーターであるオブジェクトを、同じキーを持つオブジェクトに変換します。各アクションクリエーターはdispatch呼び出しでラップされるため、直接呼び出し可能になります。

通常はStoreインスタンスで直接dispatchを呼び出すべきです。ReactでReduxを使用する場合、react-reduxがdispatch関数を提供するため、こちらも直接呼び出せます。

bindActionCreatorsの唯一のユースケースは、Reduxを認識しないコンポーネントにアクションクリエーターを渡したいが、dispatchやReduxストア自体は渡したくない場合です。

便宜上、最初の引数として単一のアクションクリエーターを渡すことも可能で、その場合はディスパッチでラップされた関数が返されます。

警告

これはもともとレガシーなReact-Reduxのconnectメソッドで使用するために設計されました。現在でも動作しますが、ほとんど必要ありません。

引数

actionCreators (Function または Object): アクションクリエーター、または値がアクションクリエーターであるオブジェクト。
dispatch (Function): Storeインスタンスで利用可能なdispatch関数。

戻り値

(Function または Object): 元のオブジェクトを模倣したオブジェクト。各関数は対応するアクションクリエーターが返すアクションを即座にディスパッチします。actionCreatorsに関数を渡した場合、戻り値も単一の関数になります。

使用例

`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)

概要​

引数​

戻り値​

使用例​

TodoActionCreators.js​

SomeComponent.js​

概要

引数

戻り値

使用例

`TodoActionCreators.js`

`SomeComponent.js`