Redux API之bindActionCreators

bindActionCreators(actionCreators,dispatch)

把 action creators 轉成擁有同名 keys 的對象，但使用 dispatch 把每個 action creator 包圍起來，這樣可以直接調用它們。

一般情況下你可以直接在 Store 實例上調用 dispatch。如果你在 React 中使用 Redux，react-redux 會提供 dispatch 。

惟一使用 bindActionCreators 的場景是當你需要把 action creator 往下傳到一個組件上，卻不想讓這個組件覺察到 Redux 的存在，而且不希望把 Redux store 或 dispatch 傳給它。

為方便起見，你可以傳入一個函數作為第一個參數，它會返回一個函數。

參數

1. actionCreators (Function or Object): 一個 action creator，或者鍵值是 action creators 的對象。

2. 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(
  state => ({ todos: state.todos })
)(TodoListContainer)

小貼士

• 你或許要問：為什么不直接把 action creators 綁定到 store 實例上，就像傳統 Flux 那樣？問題是這樣做的話如果開發同構應用，在服務端渲染時就不行了。多數情況下，你 每個請求都需要一個獨立的 store 實例，這樣你可以為它們提供不同的數據，但是在定義的時候綁定 action creators，你就可以使用一個唯一的 store 實例來對應所有請求了。

• 如果你使用 ES5，不能使用 import * as 語法，你可以把 require('./TodoActionCreators') 作為第一個參數傳給 bindActionCreators。惟一要考慮的是 actionCreators 的參數全是函數。模塊加載系統並不重要。