转岗前端第一个业务需求

转岗前端第一个业务需求

背景

时间还是很快的，从19号转岗前端到今天都要一个月啦，在这期间，也做了三五个小需求，现在写个小结

原型

1. 在现有调拨模块下新增报表管理子模块，报表管理中有三个报表为：出库明细报表，入库明细报表和在途数据详情
2. 每个报表页面分Search和TableList两块。入库明细报表和出库明细报表页面只有一个字段之差，在途数据详情页面差异要多些。

代码实现

1. 在接需求之前，看已有页面一周，理解了现有数据流向，虽然还不知道底层实现。
   基本上每个组件都有一个index入口文件，此文件写中间件和redux的Provider组件，这里面都不需要修改，直接使用即可，然后引入了containers中的index文件，此文件使用了redux的connect组件，将components中的文件引入，主要的页面实现都在components中实现，（之前还有action reducer等，这些都是redux封装的管理状态的），基本的components都有三个文件，index，search和tableist，search为搜索条件显示，tableist为点击搜索后的数据显示。index则承载了search和tablelist。
2. 实现的大体思路为：直接使用之前的模块，修改名字为此模块名字，先实现页面，在实现功能。
3. 修改页面显示：
   3.1 在挑选字段的时候，需要挑选和你需要字段最相近的使用；
   3.2 原型上的样式不一定是最后实现的样式，比如搜索条件，为了使用笔记本的宽度，最多放三个搜索条件，但是原型上的条件可能更多或者更少。
   3.3 如果后端已经定义了字段，最好使用已经定义好的字段，如果没有，最好使用前面使用过的
   3.4 对于需要改动的页面，有时候使用了项目内部封装的组件，需要在项目里面找一下，看下测试用例，才能知道怎么用。
4. 实现功能和数据流向
   4.1 如果涉及后端接口变化，需要更新后端接口连接。但是这个只需要更新一次（因为已经把链接命名并且导出，项目中使用的是重命名的名字），都集中在constants中的index或者api文件中(有时候是每个子组件都有，有时候是一个主组件公用部分)
   4.2 当时就是根据之前的数据流向，把名字啥的改成此项目相关的，我改动的时候，基本是每个文件改一下，然后再把所有文件一起拉出来，顺着流向再补充改一次。
   4.2.1 这个流向最开始基本就是按照1的思路在改，然后细化开来，因为主要改的是action reducers这些。
   4.2.2 一般在components的index中存在this,props.XXX,一般这个是从action定义。
   4.2.3 action主要作用就是派发动作，定义action type，当遇到哪个type，派发什么动作，但是不负责具体的实施，就像传话筒，告诉你去做什么，但是具体怎么做，不在action中。
   4.2.4 有时候一个type的派发就直接导出了，但是有时候，如果用到了同一内容，需要反复使用，可以把很多type写在一起，再导出。
   4.3.5 具体哪个type怎么做派发的动作是写在reducer中。
   4.3.6 还要记得从containers中使用connect把state和dispach对应成props使用。