先上图片

屏幕快照 2019-07-19 上午10.06.00.png

这个计算器模块用到了Redux以及antd,代码也不是很多。那么我们废话不多说,我们直接动手吧


Hello World

第一步当然是构建项目啦,这里我们用脚手架创建一个新项目,至于脚手架的下载以及使用在这里就不多赘述,请大家自行百度

在正式开始之前我们先看一下项目完成后的目录结构

屏幕快照 2019-07-19 上午10.17.48.png

这里我没有创建components文件夹,也没有去按照常用的三种结构去管理目录,原因是本项目中只有一个模块,这样的结构我觉得还是方便大家学习的。

  1. store <- redux仓库
  2. store_actionCreators.js <- 存放action
  3. store_actionTypes.js <- 存放状态码
  4. store_index.js <- 创建store
  5. store_reducer.js <- reducer
  6. Calculator.css <- CSS文件
  7. Calculator.js <- 模块文件
  8. KEY.js <- 存放计算器按钮
  9. lib.js <- 计算逻辑文件(中缀->后缀->计算)

以上就是文件对应的功能介绍,这里第六条提到了中缀->后缀->计算,这里就请大家移步我的另一篇文章「中缀表达式转后缀表达式」进行学习。