React和Redux的教程已经汗牛充栋,这里也不想对着问题继续纠结.对于基本的数据流程理解了以后,需要考虑到怎么来改进实际的开发过程.
Redux的文件夹种类很多,纷繁芜杂,其实目的只有一个:分离程序设计的关注点 初学者可能对这个很头疼.经过一段时间学习以后,你可能就会觉得这种文件夹的分类是非常的舒服,但是我觉得仍然有改进余地.例如可以在独立逻辑处理的文件中引入命名空间的做法:
针对登录的逻辑,包括展示层,逻辑处理层,可以做如下处理
整个数据的流程是UI component(action)->Redux's store(actionType)->change state 结束了.我开始以为还有从state到UI component的流动,实际是没有的. UI component对于的state是订阅以及展示的过程,和交互过程实际没有关系的.
loging.UI.js //登录的展示层,实际上React能够完成的基础工作就是界面的展示工作
// 同时为交互操作留有action的地方
//==========================================================
//login.UI.js中的提交按钮触发登录操作的action以后,控制权就交到了Redux中
//由此可以知道关注点发生了分离，但是为了编写和分析方便,我们仍写到一起
//==========================================================
login.action.js //定义action函数
login.actionType.js //定义action的类型
login.reducer.js //根据actionType做出state改变的地方
login.saga.js //如果使用redux-saga来处理异步操作,添加这个文件
//这样做与登录有关的UI和数据处理的逻辑就在一个文件夹里,IDE中打开文件夹操作起来非
//常高效,例如在webstorm中打开一个文件夹,不要再开很多目录, 整个登录的逻辑都在一
//起,很容易观察到数据的流向
在上面的流程中我们已经完成了用户和组件的交互操作.
初学者这里总会有疑问,那么请问如果我登录了,我怎么把异步获取的数据传递到其他页面.
这个问题解决办法有很多,如果你做过web开发就知道,会用cookie和session来做全局存储.
或者在app开发中使用本地存储把它保存起来,其实也是全局的存储方法.
登录的问题解决了,其他有页面之间传值的需求,你还需要借助于路由组件传递参数吗？
尽量不要这么做,其他页面需要的值，都把他放到Redux中来存储.
有了Redux，Redux-presist,normalizr,齐活了.有了这几个东西,Redux的state就变成前端数据库了.
web开发中模板需要的数据从数据库中取,Redux的组件中需要的数据也可以同样操作, 类似 mysql select * from datatable where num>10的操作.
每个组件只需要从state中选出需要的节点就可以了.
触发state改变的组件再也不用考虑到底还要给多少页面来传递值.需要数据的页面直接选取就可以了. 这样做的好处就是,即使不知道到底app的逻辑怎么发展,扩展性都很强.反正东西都在store里，谁需要就自己告诉售货员需要什么.
实际开发中的初步考虑
分离了关注点,开发中也可以分为两部分,一部分集中做UI展示,一部分做逻辑处理
异步登录Redux，Redux-saga的处理方法
如果以登录的逻辑处理,Redux部分只需要获取action传递用户登录信息
所以可以在login.UI.mock.js中放简单的提交按钮直接触发
dispatch(userLoginRequest(user.name,user.password,validationcode))就可以了.
后续的工作就交由Redux和Redux-saga来处理. 控制权转移到Redux.
这里有程序员集中考虑state的结构和实际的异步操作逻辑.
UI页面
UI组件现在就是静态展示作用,React再也不处理和UI展示无关的内容.
可以有程序员专门处理展示组件的编写
Server端
Server开发落后于手机端开发的时候,可以导入mock-server，结合结构文档来构造假数据.根据开发环境来切换url就可以.
这样我们的前端React/Redux/Redux-saga的开发流程就完整了.
**分离关注点,分离关注点 **
