Redux概念简述
Redux是一个数据层框架,用来管理数据。Redux提出了(公用的)Store的概念来管理数据。
Redux = Reducer + Flux
Flux和React是由Facebook一起推出的,用来辅助React,但是后来人们发现Flux有一定的缺陷,就引入了Reducer。有了现在的Redux。
Redux中store的作用
大家都知道前端组件化的概念,就是把页面的各个部分拆分成一个个小的组件。但是就存在一个问题,数据怎么管理?还是先以前一样通过组件之间的传值吗?
从图片左边可以看出,当最底层的组件要想给最上层的组件传值的话,就要通过中间很多组件,一个数据在组件中传来传去的,很麻烦。
在有了store之后,组件之间的传值就会很容易。从图片的右边可以看出,store把所有的数据都存储到store中,组件需要用到数据直接去store中去取,直接和store取得联系就可以了,避免了组件之间的传值。数据的统一管理也很方便。
Redux的工作流
上图就是组件要改变store中的数据的流程。
React Component(蓝色部分):就是react中的组件,当他要改变数据时。
1.发送dispatch(action)----ActionCreators(黄色部分)来与store做通信,(当store接受到信息之后,store并不知道该怎么做)。
2.store又向Reduxcers发送这个action(改变数据的请求)和现在store中的数据。
3.Reducers接受到数据和action就开始修改数据
4.Reducers返回修改之后的数据给Store
5.React组件检测到store中数据的变化就会从store中获取新的数据
action就是你要做什么这个动作。
可以把这个想象成从图书馆借书的过程。
1.你(React组件),有借书请求(发送action),
2.给图书管理员(store),图书管理员再去查用来记录书籍位置信息的小册子(reducers)
3.查到后就给借书人说书的位置(对应Reducers返回后的部分)