28.如何使用actionCreator统一创建action? - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

1.创建actionCreator

在store目录下，创建 actionCreators.js 文件

--------在这个文件中创建一些方法

import { CHANGE_INPUT_VALUE } from './actionTypes'

export const getInputChangeAction = (value) => ({
       type: CHANGE_INPUT_VALUE,
       value
})

这样就创建了一个actionCreator,它就是为了帮我们创建action的。

2. 在组件中使用actionCreator

import store from './store'
import { getInputChangeAction } from './store/actionCreators'  // 在组件中引入actionCreator中的方法

handleInputChange = (e) => {
   // 使用actionCreator
   const action = getInputChangeAction(e.target.value)   
    // 执行一次getInputChangeAction方法同时将e.target.value传入这个方法
   // 这个方法执行后，直接帮我们返回了一个对象。这个对象就是我们之前用的action对象、
   // 通过这种方式，我们就把action的创建统一封装到了actionCreator 当中。
   store.dispatch(action)
}

总结 ： 由于在封装actionCreator之前，所有的action都是分散在各个业务逻辑当中去创建的。这样就很难统一管理和维护action。

所以，我们通过这种方式封装了一个actionCreator，让这个文件中的函数返回一个action对象给我们。我们在这个 actionCreator中统一去管理action.

这样做的目的主要是为了提高前端代码的可维护性。