redux-watchman
redux-watchman
是一个基于async + await
用于管理异步数据流的redux中间件。api的设计灵感来源于redux-saga,但是他:
- 轻便 —— 经过转义压缩后仅 3KB。
- 实用 —— 根据
saga
常用的api进行设计,在async + await
普及的今天,它能带来不一样的开发体验。 - 简易 —— 如果您是
saga
的用户,且熟悉async+await
语法那可以说是0
学习成本,如果您是新手,简易的demo也能让你快速入手。 - 可靠 —— 作者已将其用在公司若干个项目中,线上稳定运行。
- 友好 ——
redux-watchman
使用 typescript 编写,且配置好 d.ts文件,能提供良好的编码提示。
如果你是 redux
的使用者,且在项目中习惯使用异步流管理数据交互,redux-watchman
将会是你不错的选择。
开始
安装
$ npm install redux-watchman -S
或者你可以在github上clone
下本项目然后:
$ npm i$ npm run build:umd
通过script标签引入umd文件夹下的js文件。
使用示例
下面我们通过一个通讯录的部分crud
来描述:
// reducer.js // 设置通讯录列表const set = { return contacts: actionpayload }// 新增/修改联系人const edit = { const contacts = statecontacts; const index = contacts; ifindex !== -1 contacts; return contacts: ...contacts return contacts: ...contacts actionpayload }// ... 省略delconst reducer = { const handler = set edit del ifhandleractiontype return handleractiontypestateaction; return state};
// watchman.js;// 用来模拟异步请求const requestMock = { return Promise;}// 用来生成单个人员const contactFactory = { return id: Math * 100 name phone }// 下面开始定义监听的各个action// 查询联系人const query = { // 仅监听一次type为query的action。因为大列表的数据一般只需要查询一次 await ; // 模拟异步过程 const mock = const payload = await ; // 往reducer上抛 await }// 新增/修改联系人const edit = { // 多次监听type为editAsync的action,因为这个会频繁操作,监听回调会接收当前action作为参数 await }// 异步删除操作const del = { await }// 删除最后一个const pop = { await } // 把响应的方法整合,通过一个接口导出const root = { await } ;
;;;;// 先创建一个watchmanconst watchman = ;const store = // run之前定义的所有方法watchman; // 接下来描述这样一个过程// 定义一个数据打印方法,方便查看每个dispatch后的数据变化。const withStoreShow = { ; return { ; }} const run = { // query await ; // 新增 await ; // 修改 await ; // 删除 await ; // 删除最后一个 await ;} ;
文档
以下均为函数
名称 | 参数 | 描述 |
---|---|---|
take | string | 接收一个字符串,作为参数,仅监听一次type 值为该字符串的action 。返回一个promise ,当该type 值的action 被dispatch 时,promise 变为resolved 状态,Promise 值为当前action |
takeEvery | string, asyncFunction | 多次take;当监听到对应action 时,调用传入的async 方法,在当前async 方法返回的promise 状态变更之前,再次dispatch 相同type 的action ,方法不会响应。返回一个状态永远为pendding 的Promise 。 |
put | action | 可以简单的理解为store.dispath ,返回一个Promise ,Promise 值为当前action |
select | (state)=>{} | select 接收一个函数f ,f 能拿到当前state 作为参数,select 返回一个Promise ,该Promise 的值为函数f 的返回值。 |
all | asyncFunction[] | 可以简单的理解为Promise.all |
createWatchman | / | 不需要传参,调用后返回{ run, watchmanMiddleware },需要将watchmanMiddleware 加入到redux middleware 中并初始化redux 。run 接收一个asyncFunction ,用于启动上面定义的effect。 |
License
MIT