Redux 进阶 -- 优雅的处理 async action

Redux 进阶 -- 优雅的处理 async action

技术杂谈小彩虹2021-08-14 14:14:21200A+A-

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

例子:改善水果店购买流程

在上一篇文章 Redux 入门 -- 处理 async action 中,阿大通过请了一个采购员完成了耗时的进口商品的售卖。

但是,阿大同时也发现了一个问题:顾客要买水果生鲜的话需要找销售员,要买进口水果生鲜的话要找采购员,这样的话,顾客需要找不同的人,很麻烦。阿大想了想,能不能让顾客只找销售员,然后销售员如果有需求再找采购员采购呢。

阿大想到了办法,让销售员把所有的需求都告诉采购员,然后采购员再传递给收银员,这样,如果是需要采购的水果生鲜,就可以独自去处理了,这样就需要把采购员改成这样了:

const API = store => {
  
  // 和 收银员 对接的方式
  const next = store.dispatch;
  
  // 接管销售员传来的顾客需求
  store.dispatch = action => {

    // 处理完了之后再对接 收银员
    switch (action.type) {
      case 'BUY_IMPORTED_APPLE': fetching(2000, () => next(action)); break;
      case 'BUY_IMPORTED_EGG': fetching(3000, () => next(action)); break;
      default: next(action);
    }
  }
}

API(store);

然后顾客来了之后就都只用找销售员了:

store.dispatch(buyApple(3));
store.dispatch(buyImportedApple(10));
store.dispatch(buyEgg(1));
store.dispatch(buyImportedEgg(10));
store.dispatch(buyApple(4));
store.dispatch(buyImportedApple(10));
store.dispatch(buyEgg(8));
store.dispatch(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}}

嗯嗯,这样看起来就一致多了。阿大心里美滋滋~

图解

代码地址:redux入门 -- 改善水果店购买流程,直接控制台运行 node ./demo4/index.js 查看效果

上一篇:Redux 入门 -- 处理 async action

下一篇:Redux 进阶 -- 编写和使用中间件

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们