bindActionCreators
最后更新于：2022-04-01 05:01:08
# `bindActionCreators(actionCreators, dispatch)`
把 [action creators](#) 转成拥有同名 keys 的对象，但使用 [`dispatch`](#) 把每个 action creator 包围起来，这样可以直接调用它们。
一般情况下你可以直接在 [`Store`](#) 实例上调用 [`dispatch`](#)。如果你在 React 中使用 Redux，[react-redux](https://github.com/gaearon/react-redux) 会提供 [`dispatch`](#) 。
惟一使用 `bindActionCreators` 的场景是当你需要把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，而且不希望把 Redux store 或 [`dispatch`](#) 传给它。
为方便起见，你可以传入一个函数作为第一个参数，它会返回一个函数。
#### 参数
1.
`actionCreators` (*Function* or *Object*): 一个 [action creator](#)，或者键值是 action creators 的对象。
1.
`dispatch` (*Function*): 一个 [`dispatch`](#) 函数，由 [`Store`](#) 实例提供。
#### 返回值
(*Function* or *Object*): 一个与原对象类似的对象，只不过这个对象中的的每个函数值都可以直接 dispatch action。如果传入的是一个函数，返回的也是一个函数。
#### 示例
#### `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 {
componentDidMount() {
// 由 react-redux 注入：
let { dispatch } = this.props;
// 注意：这样做行不通：
// TodoActionCreators.addTodo('Use Redux');
// 你只是调用了创建 action 的方法。
// 你必须要 dispatch action 而已。
// 这样做行得通：
let action = TodoActionCreators.addTodo('Use Redux');
dispatch(action);
}
render() {
// 由 react-redux 注入：
let { todos, dispatch } = this.props;
// 这是应用 bindActionCreators 比较好的场景：
// 在子组件里，可以完全不知道 Redux 的存在。
let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch);
console.log(boundActionCreators);
// {
// addTodo: Function,
// removeTodo: Function
// }
return (
<TodoList todos={todos}
{...boundActionCreators} />
);
// 一种可以替换 bindActionCreators 的做法是直接把 dispatch 函数
// 和 action creators 当作 props
// 传递给子组件
// return <TodoList todos={todos} dispatch={dispatch} />;
}
}
export default connect(
TodoListContainer,
state => ({ todos: state.todos })
)
~~~
#### 小贴士
-
你或许要问：为什么不直接把 action creators 绑定到 store 实例上，就像传统 Flux 那样？问题是这样做的话如果开发同构应用，在服务端渲染时就不行了。多数情况下，你 每个请求都需要一个独立的 store 实例，这样你可以为它们提供不同的数据，但是在定义的时候绑定 action creators，你就可以使用一个唯一的 store 实例来对应所有请求了。
-
如果你使用 ES5，不能使用 `import * as` 语法，你可以把 `require('./TodoActionCreators')` 作为第一个参数传给 `bindActionCreators`。惟一要考虑的是 `actionCreators` 的参数全是函数。模块加载系统并不重要。