Redux入门

 

 

一 为什么使用Redux?

 

如下图,组件H需要用到a组件里的数据,假设不使用Redux,那么只能通过React的props和state属性进行逐渐往上分发(H>e>b||c>a)拿到a的数据之后,又要从a组件逐级往下分发(a>b>e>h),如果只是简单的需求,也能解决问题;但是如果在比较复杂的项目中还这样,项目维护起来就会很艰难,而且代码看起来也很臃肿。

image.png

但如果使用redux,数据统一存在store里,通过store进行分发,不管哪个组件都能一键分发。

 

image.png

 

二 如何使用Redux?

 

redux使用需要理解下图各个模块之间的作用和关系。为了方便描述,我用A、S、R、C分别代表Action、Store、Reducers、Components

首先,S的意思代表商店(表示所有数据的存放池),A的意思为动作(表示你触发增删改查操作数据的行为),R,很明显是个名词,可以理解为商店的店员(帮助查找数据),C的意思是组件,可以理解为顾客。那么这样就很好理解了,我一个顾客C想去买一个商品(触发Action动作),就要去商店(触发S)找这个商品,我找了半天没找到,于是问了店员,店员就去帮你找到了(触发R),最后付完钱走出商店,拿到了你想要的商品(state)。

image.png

                        redux运行流程

使用总结:

1.资本家redux要开一个商店,店里要配店员。(使用createStore(reducer)创建store)

image.png

2.我想要买个女朋友,于是去商店了(创建一个action,并把action提交给store)

image.png

3.店员熟悉店里个各种商品,对于顾客一律是有求必应,因为柜台摆动的模型,所以顾客要什么都是拿出新的给顾客(参数state表示当前商店有的商品,参数action表示顾客提的要求,reducer中和react中的props相似,可以接受state,但不能直接修改,需要进行一个拷贝)

image.png

4.购买好了,商店的要更新商品的库存了。(

store.subscribe(方法名)监听数据变化并作出修改)

image.png

 

三  如何获取Redux中的state?

 

通过store.getState()获取

image.png

 

 

四 如何更新Redux中的state?

通过store.subscribe(方法名)进行更新

image.png

 

 

 

 

以上是redux是的入门级别的运用,redux进阶使用文章关注公众号“极致简文”,拜拜

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章