Redux工作流程 ,单向数据流

文章目录

Redux工作流程

之前在公司学习react的时候没有学习redux而是以开始就让我学习使用Dva ,Dva是阿里系的框架,最近也是很火,受到许多使用react公司的青睐,毕竟学习成本比redux要低很多;然而想要成为react方向的前端程序员,redux肯定是使用的更多的,Redux是目前React生态中,最好的数据层框架,所以在前一段时间就开始学习redux并最终完成一些项目,
作为程序员,分享是最基本的素养,我接下来将会把每天的学习成果在此分享,希望能有一起学习的同学交流分享
(本文章是参考jsp.com播客编写,有兴趣的可以去阅读,目前是我遇到最喜欢的react教程)

Redux是目前React生态中最好的数据层框架,理解redux最重要的就是他的数据流向,官方文档中清楚的给出了数据流向图!!!Redux数据流向图
如上图中 更能清楚明白redux对于javascript应用而言是一个可预测状态的容器,即它是一个数据流框架。
redux主要用作应用状态的管理,即redux用一个单独的常量状态树(对象)保持这一整个应用的状态,这个对象不能直接被改变。如果一些数据变化了,一个新的对象就会被创建(使用action和reducers)

刚学习react的同学最头疼的是数据流向了,那么怎么更清楚的理解redux官方文档给出的数据流向图呢??? 我们先完整介绍流程

图中容易看出所有的东西都是以store为核心,我们把它看成数据存储中心,数据银行,但是他要更改数据的时候不能直接修改,数据修改更新的角色由Reducers来担任, store只做存储,中间人,当Reducers的更新完成以后会通过store的订阅来通知react component ,组件把新的状态重新获取渲染,组件中我们也能主动发送action,创建action后这个动作是不会执行的,所以要dispatch这个action,让store通过reducers去做更新
React Component 就是react的每个组件啦

额~~~,是不是有些小伙伴还是不太懂,那我们举个栗子吧

React Component—人想去贷款创业
store ----银行的钱
Reducers----银行信贷系统
Action Creator----人自己去贷款的动作
你细品下…
你(React Component)想改变自己的经济状况,产生一个去贷款的动作(Action Creato),找到了银行的钱(store),管理员调用信贷系统(Reducers),管理员把钱给你,你变了你的经济状况(更改了状态重新渲染组件)

发布了5 篇原创文章 · 获赞 3 · 访问量 266

猜你喜欢

转载自blog.csdn.net/pz1021/article/details/104660520