redux-actions-creator

redux actions创建助手，集成redux, react-actions, immutable(seamless-immutable)

使用redux常常需要创建大量的常量字面量，手动创建actions, 以及相应的reducers进行数据处理，redux-actions-creator 简化这类的流程，基于两个方法buildRedux和buildListRedux来减少重复性的工作. 返回对象包含actions, types, reducer

安装

1yarn install redux-actions-creator
2# or
3# npm install redux-actions-creator

使用

redux.js

1import { buildListRedux, buildRedux } from 'redux-actions-creator'
2import { combineReducers } from 'redux'
3
4export const companyListRedux = buildListRedux('company_list')
5export const companyAddRedux = buildRedux('company_add')
6
7export default combineReducers({
8  list: companyListRedux.reducer,
9  add: companyAddRedux.reducer
10})
11

container.js

1...
2import {companyListRedux, companyAddRedux} from './redux'
3
4class ContainerComponent extends React.Component { ... }
5
6
7export default connect(
8  state => ({
9    ...
10  }),
11  dispatch => bindActionCreators({
12    actionList: (page, limit, params) => companyListRedux.actions.start(page, limit, params), // list
13    actionAdd: (data) => companyAddRedux.actions.start(data), // add
14  }, dispatch),
15)(ContainerComponent)
16

API

buildRedux(actionName, defaultData)

params	type	description
actionName	string	Redux action name
defaultData	object	data to extend the initial data

初始值(state)

1{
2  loading: false,
3  error: false,
4  success: false,
5  errorMessage: '',
6  params: null,
7  ...defaultData
8}

返回值

1{
2  reducer, 
3  types: {  // 常量
4    START,
5    SUCCESS,
6    RESET,
7    ERROR,
8  },
9  actions: {  // actions
10    start,     // action: params => params
11    success,   // action: data => ({data})
12    error,     // action: errorMessage => ({errorMessage})
13    reset,     // action
14  },
15}

---

buildListRedux(actionName, defaultData)

params	type	description
actionName	string	Redux action name
defaultData	object	data to extend the initial data

初始值(state)

1{
2  loading: false,
3  error: false,
4  success: false,
5  errorMessage: '',
6  params: null,
7  data: {
8    page: 1,
9    per_page: 10,
10    total_count: 0,
11    total_page: 0,
12    entries: [],
13  },
14  ...defaultData
15}

返回值

1return {
2  reducer, 
3  types: {  // 常量
4    START,
5    SUCCESS,
6    RESET,
7    ERROR,
8  },
9  actions: {  // actions
10    start,     // action: (page, limit, params) => ({page, limit, params})
11    success,   // action: data => ({data})
12    error,     // action: errorMessage => ({errorMessage})
13    reset,     // action
14  },
15}

状态变更

1/* initial data */
2{
3  loading: false,
4  success: false,
5  error: false,
6}
7
8
9actions.start() // => loading: true 
10actions.success() // => success: true
11actions.error() // => error: true, errorMessage(optional)
12actions.reset() // => initial data
13

---

Connect Sagas

API 额外提供的reducer create actions与sagas处理合并

1. 初始化store, 合并sagas

1import { allSagas, init } from 'react-actions-creator'
2import doFetch from 'your fetch funciton file' // fetch
3
4init(doFetch) // 初始化fetch方法
5
6...
7
8export default function* rootSaga(getState) {
9    yield all(sagas.concat(allSagas))
10}
11

2. 使用

buildListReduxConnectSaga(actionName, initData)(object) actionName, initData参数跟方法buildListRedux一致 object是saga的监听方法, 两次调用返回值跟buildListRedux一致，返回types, actions, reducer, 具体参数如下:

1import { buildListReduxConnectSaga, buildReduxConnectSaga } from 'react-actions-creator'
2
3export const companyListRedux = buildListReduxConnectSaga('company_list', {})({
4  url: (payload, {}) => {
5    return API.company.list(payload.page, payload.limit) + payload.params
6  },
7  method: 'GET',
8  data: function*(data, payload, {}) {
9    ...
10  },
11  resultHandler: function*() {
12    ...
13  },
14  after: function*() {
15    ...
16  }
17})

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

1
2import { buildListRedux, buildRedux, buildListReduxConnectSaga } from 'redux-actions-creator'
3import { obj2params } from 'utils/objectHelper'
4import { API } from 'conf/api'
5import { mockDataWrapper } from 'utils/mockDataHelper'
6
7...
8
9export const companyListRedux = buildListReduxConnectSaga('company_list')({
10  url: (payload) => {
11    console.log('load list', payload)
12    const { page = 1, limit = 10, params } = payload
13    const tranParams = obj2params(params)
14    return API.company.list(page, limit) + (tranParams ? '&' + tranParams : '')
15  },
16  method: 'GET',
17  
18  // fetch请求后
19  resultHandler: (data, payload, { put }, actions, allReduxActions) => {
20    const { page = 1, limit = 10, params } = payload
21    return mockDataWrapper(data, page, limit)
22  },
23  // resultHandler执行完以后
24  after: function* (data, payload, { put }, actions) {
25    const { page = 1, limit = 10, params } = payload
26    if (page === 1) {
27      yield new Promise(r => { setTimeout(() => r(), 1000)})
28    }
29  },
30  
31  // 错误异常
32  catch: async (e) => {
33    await new Promise(resolve => setTimeout(() => resolve(), 1000)) // 异步1s
34    console.log(e)
35  }
36})
37

注意，resultHandler, after, catch方法, 可以接受三种函数，分别分同步， sync异步，或者generator function

1. 当方法不需要异步操作时，直接使用同步方法
2. 当需要异步操作时，使用 async () => any 的方法
3. 当需要异步并且还使用到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参数的驼峰形式

1...
2
3export const companyListRedux = buildListReduxConnectSaga('companyList')(
4  function* (payload, { put, call }, actions) {
5    try {
6      let { page, limit, params } = payload
7      page = page || 1
8      limit = limit || 10
9      const tranParams = obj2params(params) // 序列化
10      const url = API.company.list(page, limit) + (tranParams ? '&' + tranParams : '')
11      const data = yield call(doFetch, { url, method: 'GET' })
12      yield put(actions.success(mockDataWrapper(data, page, limit)))
13    } catch(e) {
14      console.log(e)
15      actions.reset()
16    }
17  }
18)