Redux

Redux概念简述

react本身是非常轻量级的视图层框架
在这里插入图片描述
以前用react写项目时组件就构成了一个应用,假如下面绿色的组件要和顶层的组件通信,如果一个应用中组件很多,组件之间经常要共享一些数据,进行数据的传值,如果只用react写,那将会很复杂,因为组件传值变得很麻烦了,所以说react只是非常轻量级的视图层框架。如果做大型的应用,就需要在react的基础上配套一个数据层的框架和它结合使用。
在这里插入图片描述
redux里要求把数据都放在公共的存储区域叫store里面,组件中尽量少放数据,假如绿色的组件要给很多灰色的组件传值,绿色的组件只需要改变store里面对应的数据就行了,接着灰色的组件会自动感知到store里的数据发生了改变,store只要有变化,灰色的组件就会自动从store里重新取数据,这样绿色组件的数据就很方便的传到其它灰色组件里了。redux就是把公用的数据放在公共的区域去存储。
Redux= Reducer + Flux

Redux的工作流程

在这里插入图片描述
Redux就是一个数据层的框架,它把所有的数据都放在了store(store是存储数据的公共区域)里,组件可以从store里获取数据,组件也可以修改store里的数据。

可以把这个流程理解成图书馆的流程:
React Component是借书的人;
Action Creators 是当我在图书馆借书的时候我会跟图书馆的管理员说我要借什么书,那么 我要借什么书这个语句的表达 ,就是我要借书这句话,可以理解成Action Creators;
Store就是图书馆的管理员,他负责整个图书馆的图书的管理;
Reducer 一个图书馆的管理员是没办法记住图书馆所有图书的存储情况的,所以需要一个记录本,你要借什么书他会去查一下书有没有,要还书去查一下书在什么位置。

转换成代码上的理解:
组件要去获取Store里的数据,跟Store说我要获取数据这句话就是Action Creators,Action Creators创建了这句话之后告诉Store,Store接收了你要获取数据这句话后,Store并不知道你要什么样的数据,它得去查一下应该给你什么样的数据,到底给你什么样的数据,Reducer里知道应该给组件什么样的数据,Reducer会告诉Store应该给组件什么样的数据,Store知道后会把对应的数据给到组件。如果想改变Store里的数据,组件先要跟Store说我要改变一个数据,会先通过Action Creators先说一句话我要改变一个数据,Store接收了你这句话知道你要改变数据了可是它不知道应该怎么帮助你去改变数据,它会去问Reducer ,Reducer接收了你传过来的这句话之后,Reducer会告诉Store的数据应该如何被修改,Store修改好数据之后就会告诉组件数据修改完了你可以重新来获取数据了,这样组件再重新获取最新的数据。

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值