Redux 入门 -- 处理 async action

本文通过买进口水果生鲜的例子,探讨了如何正确处理Redux中的异步Action,避免在reducer中进行异步操作,确保其纯函数特性。

本文目标:希望通过买进口水果生鲜的例子,和大家探讨一下如何处理异步的 async action

例子:买进口水果生鲜

在上一篇文章 Redux入门 -- 拆分 reducer 中,阿大通过 reduxbindReducers 方法将水果店的业务分治成功,店铺也越做越大。以至于有顾客开始想要买一些进口的水果生鲜。

阿大考虑了一下,决定继续拓展这个店铺,从事进口商品的销售。首先是顾客的需求行为需要购买进口水果生鲜:

// 买水果 - 进口苹果
+ 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

内容概要:本文系统介绍了算术优化算法(AOA)的基本原理、核心思想及Python实现方法,并通过图像分割的实际案例展示了其应用价值。AOA是一种基于种群的元启发式算法,其核心思想来源于四则运算,利用乘除运算进行全局勘探,加减运算进行局部开发,通过数学优化器加速函数(MOA)和数学优化概率(MOP)动态控制搜索过程,在全局探索与局部开发之间实现平衡。文章详细解析了算法的初始化、勘探与开发阶段的更新策略,并提供了完整的Python代码实现,结合Rastrigin函数进行测试验证。进一步地,以Flask框架搭建前后端分离系统,将AOA应用于图像分割任务,展示了其在实际工程中的可行性与高效性。最后,通过收敛速度、寻优精度等指标评估算法性能,并提出自适应参数调整、模型优化和并行计算等改进策略。; 适合人群:具备一定Python编程基础和优化算法基础知识的高校学生、科研人员及工程技术人员,尤其适合从事人工智能、图像处理、智能优化等领域的从业者;; 使用场景及目标:①理解元启发式算法的设计思想与实现机制;②掌握AOA在函数优化、图像分割等实际问题中的建模与求解方法;③学习如何将优化算法集成到Web系统中实现工程化应用;④为算法性能评估与改进提供实践参考; 阅读建议:建议读者结合代码逐行调试,深入理解算法流程中MOA与MOP的作用机制,尝试在不同测试函数上运行算法以观察性能差异,并可进一步扩展图像分割模块,引入更复杂的预处理或后处理技术以提升分割效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值