该项目的github 地址:https://github.com/lewis617/redux-amrc
中文文档
这个插件将会帮你用更少的代码发起异步 action。通过这个插件你将:
- 不需要再手动编写异步 action 对象。
- 不需要再手动编写 reducer 来处理异步 action 对象。
- 获取插件自动生成的 value、error、loaded、loading、loadingNumber 等多个异步状态。
安装
npm install redux-amrc --save
初级用法
该插件的初级用法只有三步:
第一步,将插件提供的 asyncMiddleware
连接到Redux的中间件列表上。
store/configureStore.js
import { asyncMiddleware } from 'redux-amrc';
applyMiddleware(thunk, asyncMiddleware)
第二步,将插件提供的 reducerCreator
安装到 Redux 的单一状态树的 async
节点上。
reducers/index.js
import { combineReducers } from 'redux';
import { reducerCreator } from 'redux-amrc';
const rootReducer = combineReducers({
async: reducerCreator()
});
export default rootReducer;
第三步,使用插件提供的 ASYNC
来标记 action 创建函数(以被中间件识别),并将异步以 Promise 的形式传递进这个 action 创建函数中。
actions/index.js
import { ASYNC } from 'redux-amrc';
/**
* 这个action创建函数将会自动创建 LOAD 和 LOAD_SUCCESS 这两个 action,
* state.async.[key] 将会变为 'success'
*/
function success() {
return {
[ASYNC]: {
key: 'key',
promise: () => Promise.resolve('success')
}
}
}
/**
* 这个action创建函数将会自动创建 LOAD 和 LOAD_FAIL 这两个 action,
* state.async.loadState.[key].error 将会变为 'fail'
*/
function fail() {
return {
[ASYNC]: {
key: 'key',
promise: () => Promise.reject('fail')
}
}
}
至此,异步的所有状态都将在你的掌控之中了,当异步 Promise 被执行,该插件会自动帮你发起这些 action:
LOAD
: 特定数据开始加载LOAD_SUCCESS
: 数据加载成功LOAD_FAIL
: 数据加载失败
你还可以从 Redux 单一状态树上获取你想要的异步状态,这些状态都是该插件给你自动生成的:
state.async.[key]
: Promise 成功时返回的数据state.async.loadState.[key].loading
: 特定 key 的数据是否正在加载state.async.loadState.[key].loaded
: 特定 key 的数据是否加载完成state.async.loadState.[key].error
: Promise 出错时返回的错误信息state.async.loadingNumber
: 当前有多少异步正在加载
高级用法
如果 Redux 单一状态树上某个节点的数据已经存在,你不想重复加载,你可以使用 once
选项,这会帮你减少异步请求,从而节约开销,提升性能。
function loadData() {
return {
[ASYNC]: {
key: 'data',
promise: () => fetch('/api/data')
.then(response => response.json()),
once: true
}
};
}
如果你想使用自己编写的 reducer 更新该插件某个节点上的数据,比如 state.async.[key]
。那么你可以在插件的 reducerCreator
方法上添加你的 reducers。其实 reducerCreator
的用法和 Redux 的 combineReducers
是一样的,都是接受多个 reducer 组成的对象。
// 你自己的 action 类型
const TOGGLE = 'TOGGLE';
// 你自己的 reducer
function keyReducer(state, action) {
switch (action.type) {
case TOGGLE:
return state === 'success' ? 'fail' : 'success';
default:
return state
}
}
// 添加 reducers 到 reducerCreator 上
const rootReducer = combineReducers({
async: reducerCreator({
key: keyReducer
})
});
// 发起这个 action 将会更新 `state.async.key` 上的数据
dispatch({ type: TOGGLE });
API
-
asyncMiddleware
: 一个 Redux 中间件 [ASYNC]
key
: 一个字符串-
promise(store)
: 一个返回Promise的函数store
(可选参数): Redux中的store对象
once
: 布尔类型
reducerCreator(reducers)
: 返回 Reducer 的函数reducers
(可选参数): 多个reducer组成的对象
例子
基本例子:一个最小的 Node 脚本,演示该插件的基本用法。npm start
运行该程序后,观察命令行的输出,可以看到该插件帮你自动发起的 action 和相关的状态变化。
与React、Fetch搭配使用:一个简单的用户界面,点击 load 按钮,该插件会帮你获取“网络请求是否正在加载”、“网络请求是否加载完成”、“网络请求得到的数据是什么”等多个异步状态。该例子的运行方法同样是 npm start
。