bindActionCreators(actionCreators, dispatch)
概述
将一个值是 action creators 的对象,转换为一个具有相同键的对象,但每个 action creator 都被包装在一个 dispatch
调用中,以便可以直接调用它们。
通常你应该直接在你的 Store
实例上调用 dispatch
。如果你使用 Redux 和 React,react-redux 会为你提供 dispatch
函数,这样你也可以直接调用它。
bindActionCreators
的唯一用例是当你想要将一些 action creators 传递给一个不知道 Redux 的组件,并且你不想将 dispatch
或 Redux store 传递给它。
为了方便起见,你也可以将一个 action creator 作为第一个参数传递,并获得一个包装了 dispatch 的函数作为返回值。
警告
此方法最初旨在与旧版 React-Redux 的 connect
方法一起使用。它仍然有效,但很少需要。
参数
返回值
(函数 或 对象): 一个模仿原始对象的,但每个函数都会立即调度由相应动作创建者返回的动作的对象。如果您传递了一个函数作为 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)