redux-actions-creator
redux actions创建助手,集成redux, react-actions, immutable(seamless-immutable)
使用redux常常需要创建大量的常量字面量,手动创建actions, 以及相应的reducers进行数据处理,redux-actions-creator 简化这类的流程,基于两个方法buildRedux和buildListRedux来减少重复性的工作. 返回对象包含actions, types, reducer
安装
yarn install redux-actions-creator# or# npm install redux-actions-creator
使用
redux.js
const companyListRedux = const companyAddRedux = list: companyListReduxreducer add: companyAddReduxreducer
container.js
... Component ... ... ContainerComponent
API
buildRedux(actionName, defaultData)
params | type | description |
---|---|---|
actionName | string | Redux action name |
defaultData | object | data to extend the initial data |
初始值(state)
loading: false error: false success: false errorMessage: '' params: null ...defaultData
返回值
reducer types: // 常量 START SUCCESS RESET ERROR actions: // actions start // action: params => params success // action: data => ({data}) error // action: errorMessage => ({errorMessage}) reset // action
buildListRedux(actionName, defaultData)
params | type | description |
---|---|---|
actionName | string | Redux action name |
defaultData | object | data to extend the initial data |
初始值(state)
loading: false error: false success: false errorMessage: '' params: null data: page: 1 per_page: 10 total_count: 0 total_page: 0 entries: ...defaultData
返回值
return reducer types: // 常量 START SUCCESS RESET ERROR actions: // actions start // action: (page, limit, params) => ({page, limit, params}) success // action: data => ({data}) error // action: errorMessage => ({errorMessage}) reset // action
状态变更
/* initial data */ loading: false success: false error: false actionsstart // => loading: true actions // => success: trueactions // => error: true, errorMessage(optional)actions // => initial data
Connect Sagas
API 额外提供的reducer create actions与sagas处理合并
- 初始化store, 合并sagas
// 初始化fetch方法 ... { }
- 使用
buildListReduxConnectSaga(actionName, initData)(object) actionName, initData参数跟方法buildListRedux一致 object是saga的监听方法, 两次调用返回值跟buildListRedux一致,返回types, actions, reducer, 具体参数如下:
const companyListRedux = { return APIcompany + payloadparams } method: 'GET' { ... } { ... } { ... }
buildListReduxConnectSaga(actionName, initData)(object) object参数
参数方式1 - 对象
name | type | description |
---|---|---|
url | String | (payload, sagaActions) => string | 请求地址 |
method | String | 'GET', 'POST' ... |
data | (payload, sagaActions) => data | 请求发送请求(常用put, post方法)以前针对body部分的data的处理 |
resultHandler | (data, payload, sagaActions, allReduxActions) => data | 请求数据成功以后, 处理data后返回,自动调用该actions.success(data)方法 |
after | (data, payload, sagaActions, allReduxActions) => void | resultHandler执行完毕后调用 |
catch | (e, payload, sagaActions, allReduxActions) => void | e为异常error |
... const companyListRedux = { console const page = 1 limit = 10 params } = payload const tranParams = return APIcompany + tranParams ? '&' + tranParams : '' method: 'GET' // fetch请求后 { const page = 1 limit = 10 params } = payload return } // resultHandler执行完以后 { const page = 1 limit = 10 params } = payload if page === 1 { } } // 错误异常 catch: async { await // 异步1s console }}
注意,resultHandler, after, catch方法, 可以接受三种函数,分别分同步, sync异步,或者generator function
- 当方法不需要异步操作时,直接使用同步方法
- 当需要异步操作时,使用 async () => any 的方法
- 当需要异步并且还使用到put等saga的function,使用generator, function*() => yield any
参数方式2 - generator function
function* (payload, sagaActions, actions, allReduxActions) { ... }
name | type | description |
---|---|---|
payload | object | action.payload对象 |
sagaActions | object | saga的API: 包含put, select, call, delay |
actions | object | 当前创建的actions: 包含start, success, reset, error |
allReduxActions | object | 全局其他地方创建的redux action, 比如 allReduxActions['companyList'].start() 其中companyList 为buildRedux, buildListRedux, buildReduxConnectSaga, buildListReduxConnectSaga方法传入的第一个actionName参数的驼峰形式 |
... const companyListRedux = { try let page limit params = payload page = page || 1 limit = limit || 10 const tranParams = // 序列化 const url = APIcompany + tranParams ? '&' + tranParams : '' const data = catche console actions }