关灯
开启左侧

redux学习注意事项及理解【转】

[复制链接]
doubleyong 发表于 2019-4-22 09:26:51 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
随笔

最近需要把公司项目重构,于是把react redux断断续续看了2个星期,才大致清楚了流程和用法,感觉初入还是有一些坑的。

推荐阅读顺序
  • react 推荐阮一峰react教程,这是最简单的react教程 ,但并没有使用es6的语法来编写。
  • webpack 阮一峰webpack教程ES6,如果不使用webpack打包的话,解析和浏览器兼容的问题会很大
  • reflux 可以稍微了解一些,帮助了解redux结构
  • Redux 虽然阮一峰的教程也好,但是还是更推荐 Redux中文文档,看理论上的东西不如跟着文档的教程走一下,虽然这个文档很详细了,但是我还是花了一点时间才能理顺。
  • 注意:Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。尽管如此,Redux 还是和 ReactDeku 这类框架搭配起来用最好!
  • 使用react之后尽量可以慢慢抛弃jquery了

笔记

初看 Redux中文文档,依然有很多不明白的地方,特别是store,reducer,action之间的联系。好在后来慢慢熟悉了。
我眼里的react+redux开发步骤:(以重构项目为例)


1. 编写组件
把页面需要呈现的UI划分为不同的组件,然后依次用react改写之前的html页面中jquery插件和各个UI部分。


2. 组织state结构state其实是最容易但是确实最难理解的一部分,state可以看做是一个虚拟的树结构,它并不像一个实体对象,需要事先全部声明有哪些类型有哪些字段,而是在你编写组件以及action和reducer过程中会动态根据你的定义而改变,当然你自己得清楚你的state整个结构 并且最好是以一个json的格式写下来,在重构的过程中不断的修改和完善。

3. action
action相对容易理解,我把它比作一个 好的函数名(坏的函数名:abc(){} ) 类似 getElementByID("id"),为什么不是函数,而是函数名字,因为 action只做了函数名该做的事情,只描述给我们听:如果调用该action 会发生生么。这里告诉我们即将会发生的就是 根据id获取该元素。

4. reducer如果说action的功能是函数名,那reducer就是实际操作者了,所以reducer就是函数的实现步骤。因此,state的状态在这里进行改变,要注意的是,并不是用我们所理解的“重新赋值”来改变state,而是根据你需要的功能重新生成一个state,把新的state返回出来。这里涉及到一个纯净函数pure function的思想,我们只要知道在reducer里面不要进行修改赋值,这样的话state永远要么是之前的状态要么是新的状态,而不会有修改错误的状态了。

5. store
之前讲的都比较容易懂,那什么是store?
store就是联系action和reducer的东西,我们可以通过传入写好的reducer来创建一个store, 然后我们通过store来执行需要执行的action,因此他们之间就联系在了一起,而此时你根本不需要去管view该如何渲染,因为在使用react编写ui组件的时候已经把组件和state联系在了一起。所以redux的流程就是:

使用通过reducer创建出来的Store发起一个Action,reducer会执行相应的更新state的方法,每当state更新之后,view会根据state做出相应的变化!

注意:再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合而不是创建多个 store。

作者:cowkeys
链接:https://www.jianshu.com/p/85c7a14833a9
来源:简书
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )