Redux 入门 -- 处理 async action
本文目标:希望通过买进口水果生鲜的例子,和大家探讨一下如何处理异步的
async action
。
例子:买进口水果生鲜
在上一篇文章 Redux入门 -- 拆分 reducer 中,阿大通过 redux
的 bindReducers
方法将水果店的业务分治成功,店铺也越做越大。以至于有顾客开始想要买一些进口的水果生鲜。
阿大考虑了一下,决定继续拓展这个店铺,从事进口商品的销售。首先是顾客的需求行为需要购买进口水果生鲜:
// 买水果 - 进口苹果
+ function buyImportedApple(num) {+ return {+ type: 'BUY_IMPORTED_APPLE',
+ payload: {+ num
+ }
+ }
+ }// 买生鲜 - 进口鸡蛋
+ function buyImportedEgg(num) {+ return {+ type: 'BUY_IMPORTED_EGG',
+ payload: {+ num
+ }
+ }
+ }
复制代码
然后水果部和生鲜部的账本也要更新啦:
// 水果账本const fruitState = {orange: 0,apple: 0,banana: 0,
+ importedApple: 0};// 生鲜账本const freshState = {egg: 0,fish: 0,vegetable: 0,
+ importedEgg: 0};
复制代码
同样的,相应部门的收银员们也要学会怎么处理进口水果生鲜的记账,他们的记账方式要改成下面这样:
// 水果部收银员
function fruitReducer(state = fruitState, action) {// 如果有人买了相应的水果,更新账本switch (action.type) {case 'BUY_APPLE':return Object.assign({}, state, {apple: state.apple + action.payload.count});case 'BUY_IMPORTED_APPLE':return Object.assign({}, state, {importedApple: state.importedApple + action.payload.count});// 买其他的东西,不更新账本,原样返回default: return state;}
}// 生鲜部收银员
function freshReducer(state = freshState, action) {switch (action.type) {case 'BUY_EGG':return Object.assign({}, state, {egg: state.egg + action.payload.count});case 'BUY_IMPORTED_EGG':return Object.assign({}, state, {importedEgg: state.importedEgg + action.payload.count});default: return state;}
}
复制代码
可是这时候阿大发现,进口水果生鲜不能大量存在自己仓库卖,因为它们又贵又容易坏,只有当顾客需要买的时候,才能去采购这些水果生鲜,于是阿大又雇了一个采购员专门负责处理要买进口水果和生鲜的顾客,等到货了再通知销售员取货给顾客:
// 采购商品生成器,不同的商品需要不同的时间采购
function fetchGoodsGenerator(time, action) {// 用延时模拟采购时间const timer = setTimeout(() => {clearTimeout(timer);// 采购完成,通知销售员store.dispatch(action);}, time);
}// 采购进口苹果需要 2 天(2s)
function fetchImportedApple(action) {fetchGoodsGenerator(2000, action);
}// 采购进口鸡蛋需要 3 天(3s)
function fetchImportedEgg(action) {fetchGoodsGenerator(3000, action);
}// 采购员
const API = {fetchImportedApple, // 采购进口苹果fetchImportedEgg // 采购进口鸡蛋
}
复制代码
好了,布置完了之后,顾客开始来买水果生鲜了:
// 销售员开始销售,采购员开始采购
store.dispatch(buyApple(3));
API.fetchImportedApple(buyImportedApple(10));
store.dispatch(buyEgg(1));
API.fetchImportedEgg(buyImportedEgg(10));
store.dispatch(buyApple(4));
API.fetchImportedApple(buyImportedApple(10));
store.dispatch(buyEgg(8));
API.fetchImportedEgg(buyImportedEgg(10));
// {"fruit":{"apple":3,"importedApple":0},"fresh":{"egg":0,"importedEgg":0}}
// {"fruit":{"apple":3,"importedApple":0},"fresh":{"egg":1,"importedEgg":0}}
// {"fruit":{"apple":7,"importedApple":0},"fresh":{"egg":1,"importedEgg":0}}
// {"fruit":{"apple":7,"importedApple":0},"fresh":{"egg":9,"importedEgg":0}}
// {"fruit":{"apple":7,"importedApple":10},"fresh":{"egg":9,"importedEgg":0}}
// {"fruit":{"apple":7,"importedApple":20},"fresh":{"egg":9,"importedEgg":0}}
// {"fruit":{"apple":7,"importedApple":20},"fresh":{"egg":9,"importedEgg":10}}
// {"fruit":{"apple":7,"importedApple":20},"fresh":{"egg":9,"importedEgg":20}}
复制代码
现在水果生鲜店的进口业务也稳妥了,阿大心里美滋滋~
讲解
在实际的开发当中我们经常会调用一些 API 接口获取数据更新 state。刚开始使用 redux 的一个误区就是在 reducer 里接收到异步的 action 之后,就在 reducer 里做异步操作,调用 API。但是这样是错误的。reducer 只能是纯函数,不能有任何副作用。这样才能保证对于相同的输入,一定会有相同的输出。
图解
代码地址:Redux 入门 -- 处理 async action,直接控制台运行
node ./demo3/index.js
查看效果
上一篇:Redux入门 -- 拆分 reducer
下一篇:Redux 进阶 -- 优雅的处理 async action
Redux 入门 -- 处理 async action相关推荐
- redux 入门到实践
前言 之前没太理解redux,在使用时总是照葫芦画瓢,看项目里别人如何使用,自己就如何使用,这一次彻底学习了下官方文档,记录. 在学习redux初时,有三个概念需要了解. action reducer ...
- React Redux入门
目录 入门 我们应该什么时候使用? Redux库和工具 Redux Toolkit Redux DevTools 扩展 demo练习准备工作: 基础示例 Redux Toolkit示例 Redux术语 ...
- redux入门_Redux入门
redux入门 典型的Web应用程序通常由几个共享数据的UI组件组成. 通常,多个组件的任务是显示同一对象的不同属性. 该对象表示可以随时更改的状态. 在多个组件之间保持状态一致可能是一场噩梦,尤其是 ...
- Flutter fish redux入门
fish redux 本分主要介绍闲鱼出品的fish redux基础知识和使用,后续会有复杂应用场景分享. flutter自带demo void main() => runApp(MyApp() ...
- Redux 入门教程(二):中间件与异步操作
上一篇文章,我介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染. 但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后 ...
- Redux入门教程详解(快速上手)
典型的Web应用程序通常由共享数据的多个UI组件组成.通常,多个组件的任务是负责展示同一对象的不同属性.这个对象表示可随时更改的状态.在多个组件之间保持状态的一致性会是一场噩梦,特别是如果有多个通道用 ...
- Redux入门教程(快速上手)
典型的Web应用程序通常由共享数据的多个UI组件组成.通常,多个组件的任务是负责展示同一对象的不同属性.这个对象表示可随时更改的状态.在多个组件之间保持状态的一致性会是一场噩梦,特别是如果有多个通道用 ...
- reactjs redux入门完整版示例:store reducer getState dispatch subscribe action
Redux原理图 暴露store 创建reducer 引入store getState获取redux中保存的state store.dispatch传给reducer 组件内部解决数据更新后页面刷新问 ...
- Redux 入门教程(一):基本用法
一年半前,我写了<React 入门实例教程>,介绍了 React 的基本用法. React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案.有两个方面,它没涉及. 代码结构 ...
- redux rxjs_可观察的RxJS和Redux入门指南
redux rxjs Redux-Observable is an RxJS-based middleware for Redux that allows developers to work wit ...
最新文章
- 如何正确使用as follows 与 following
- kangle web server源代码安装简明教程
- JZOJ 5400. 【NOIP2017提高A组模拟10.7】Repulsed
- CSDN排名及积分规则
- 【蓝桥杯】历届试题 错误票据
- 阿里敏捷教练:多团队开发一个产品的组织设计和思考
- 08 事务到底是隔离的还是不隔离的?(转)
- CoreLocation框架--监测方向/地磁传感器
- 忘记密码后恢复思科设备密码的方案
- 路由入口与vue布局入口
- 通过wal文件查看lsn和txid,lsn和txid对应关系
- “创药网”-创新药领域专业资讯网站​
- mysql load escaped_MySQL load语句详细介绍
- pads-logic
- 米波现场桌面软件服务器地址,米波现场系统启动workerman服务service workerman start...
- PPT素材 + 手机怎么玩洛克王国(flash游戏)
- 大数据——corejava学习笔记
- 部署SSM项目到阿里云服务器ECS
- 【渝粤题库】国家开放大学2021春1396药事管理与法规(本)题目
- KNN算法改进约会网站匹配效果