redux拓展优化action creator 与Action Type的使用

redux拓展优化action creator

dispatch({type: 'book/add', payload: '三国演义'})
dispatch({type: 'book/add', payload: '红楼梦'})

一个action的type名字出现多次,多次dispatch会重复,不利于修改

思路

补充一个action creator。

• 它是一个函数。

• 作用：用来创建指定类型的action。

• 入参：payload

• 返回值: action

• 示例： 

const addAction = (payload) => ({type: 'book/add', payload})
dispatch(addAction('三国演义'))
dispatch(addAction('红楼梦'))

实操

在store目录下，补充创建actions目录，按reducer的模块，来划分每一个具体的actions

├── src
   ├── store          # redux目录，一般约定叫store
   |     ├── index.js   # 定义并导出store. 其中会导入reducer
+  |     └── actions    # 多个模块的action
+  |         ├── action1.js    # 模块1的 相关action creator
+  |         ├── action2.js    # 模块2的 相关action creator
   |     └── reducers   # 多个模块的reducer
   |         ├── reducer1.js   # 模块1的reducer
   |         ├── reducer2.js   # 模块2的reducer
   |         └── index.js      # reducer的整体入口，会导入reducer1, reducer2
   ├── index.js       # 项目的入口文件，会导入并渲染App.js
   ├── App.js         # 根组件，引入模块1 和模块2 组件
   ├── 模块1.js       # 模块1 组件
   └── 模块2.js       # 模块2 组件

示例代码

export const addAction = (payload) => ({type: 'book/add', payload})

redux拓展优化Action Type的使用

背景：在reducer和action creator中都用到了一个字符串的 action type。

问题：容易写错，不利于统一修改。

解决

思路：集中处理 action type，保持项目中 action type 的一致性

处理方式：

1. 在 store 目录中创建 actionTypes 目录或者 constants 目录，集中处理

2. 使用常量来存储 action type。例如 

export const SET_NAME = 'user/setName'
export const SUB_MORE = 'money/subMore'

注意:常量名一定要是全大写的方便识别    

 3.将项目中用到 action type 的地方替换为这些常量，从而保持项目中 action type 的一致性