Redux入门

 

 

一 为什么使用Redux？

 

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

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

 

 

二 如何使用Redux？

 

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

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

                        redux运行流程

使用总结：

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

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

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

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

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

 

三  如何获取Redux中的state？

 

通过store.getState()获取

 

 

四 如何更新Redux中的state？

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

 

 

 

 

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