redux 入门之 action

Question

action

action 相当于一个载体，它携带数据(可能是用户操作产生，或者接口数据)，并且会根据事先定义好的 type，传给 store.dispatch(action)，触发 reducer 方法，更新 state。

通常一个 action 是一个对象，类似于这样

{
    type: 'UPDATE_TEXT',
    text: 'update'
}

需要 dispatch 更新的时候 dispatch(action)，就会传给 reducer(action)，reducer 函数根据具体的 type 返回 state，store 会更新 state。

actionCreator 顾名思义，action 创建函数。

function updateText(text) {
   return {
     type: 'UPDATE_TEXT',
     text, 
   }
}

这样看起来更独立一些，当操作的时候我们只需要把 text 传给 creator，就可以得到一个符合要求的 action。所有相关的 actionCreator 都放到一个文件里，放到一个对象里 actionCreators， 调用 action 的时候，只需要 dispatch(actionCreators.updateText('abc'))。

bindActionCreators

这个函数接受两个参数 actionCreators 和 dispatch。 第一个参数是 actionCreator 的集合，是一个对象。第二个参数 dispatch 由 store 提供。

这个函数通常是配合 react-redux 使用，通过 connect 把改造后的 actions 对象传给 Component。这样，我们就可以在一个专门的 actions.js 文件里定义他们，而我们的组件内部，不需要写 dispatch(action) 这样的操作，组件内部感知不到 redux 的存在。这样的好处是降低耦合性，组件内部只是调用一个方法，而这些方法通过 connect 传给父组件，子组件仍旧是独立的，或者说是木偶组件。

//actions.js
function updateText(text) {
return {
  type: 'UPDATE_TEXT',
  text
}
}
function addText(text) {
return {
   type: 'ADD_TEXT',
   text
}
}
const actions = { updateText, addText  }

import { bindActionCreators, createStore } from 'redux';
const store = createStore(reducer);
const bindActions = bindActionCreators(actions, store.dispatch)
store.actions = bindActions;

ReactDOM.render(
<App  store />
)
//伪代码