React-Redux的用法思路

由于公司使用的React的全家桶所以我也大概接触了React,写过一些React的代码。

==============================================================

首先来说(我只记录一下我的理解与思路,没有针对初学者的完整教程)

起初在学习 React-Redux 的时候看过很多帖子与教学,都是一步一步的去教你怎么去实际的应用,提供一些简单的实例和语法用法之类的。

我也是从这些帖子学到的东西然后实际的写了一些东西,但是我发现在实际的应用中你需要处理的业务要不那些简单的例子复杂的多的多,也会有很多莫名其妙的问题。

=======================思路==================================

首先确定业务逻辑,功能点:

拿到需求文档跟原型图以后,不要开始写代码!不要开始写代码!不要开始写代码!!!

因为React-Redux是一种相对复杂的代码实现方式 而不是 写流水账式的代码,一步一步的去实现业务。

比如你现在写代码的流程可能是:一个按钮用户点击以后出一个弹窗==》弹窗里展示上个层级的数据==》有一个删除操作==》删除之后第一个页面展示数据也要删除。

很有可能前面都很顺利,但是当你写到删除的时候傻眼了。。。。怎么去操作最开始层级的数据?(大神别吐槽我)


我的想法是在写代码之前把这些都要规划好:

React-Redux的用法思路_第1张图片


把要写的东西分为两个部分:展示跟

1。你要展示的东西(列表,详情等等)

2。你要做的一些动作(弹出啊,删除啊编辑,滑动等等)


先设计好自己需要几个store 每个store有哪些字段(后端获取需要展示的字段),有哪些状态(状态控制显示,隐藏,滑动,等一些效果跟特效)

然后把展示写好,根据状态进行显示隐藏,滑动等等所有的效果都写好。

然后写用户动作,点击需要隐藏,就找到对应控制隐藏的store的状态字段然后改变状态

需要展示数据 就调用接口 然后把数据渲染到你定义的 store


要做到完全的分开,显示数据就是显示数据,所有的效果用store里的状态字段控制。

显示都没有问题 再去添加用户动作,而用户的动作 也就是去修改 store 的值 而不要去管理任何关于显示的东西。


综上:共勉。








 

你可能感兴趣的:(js)