Redux入门

╰半夏微凉° 2023-07-04 06:20 16阅读 0赞

### **一 为什么使用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][image.png 1]

### **二 如何使用Redux？** ###

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

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

![image.png][image.png 2]

redux运行流程

### **使用总结：** ###

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

![image.png][image.png 3]

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

![image.png][image.png 4]

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

![image.png][image.png 5]

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

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

![image.png][image.png 6]

### **三  如何获取Redux中的state？** ###

通过store.getState()获取

![image.png][image.png 7]

### **四 如何更新Redux中的state？** ###

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

![image.png][image.png 6]

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

![format_png][]

![format_png 1][]

![format_png 2][]

![format_png 3][]

[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi81Q3hTbXlwT19JT2FMLnBuZw?x-oss-process=image/format,png
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9NTktyeVplY19CZVhILnBuZw?x-oss-process=image/format,png
[image.png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9OeUprV2FIdV96ZHRoLnBuZw?x-oss-process=image/format,png
[image.png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9TZFlVYk95RV9CNlRhLnBuZw?x-oss-process=image/format,png
[image.png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9TTlF5R0lUYV81blRTLnBuZw?x-oss-process=image/format,png
[image.png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9ENHI1UmRIZl9iU0lwLnBuZw?x-oss-process=image/format,png
[image.png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi80cjhYWkhIOV9CZHpaLnBuZw?x-oss-process=image/format,png
[image.png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi82ZVlwT0pwUl92R3JqLnBuZw?x-oss-process=image/format,png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNHZuendhSmRIYzROYzF4b1p2dEt3VzRPZ0xvV2lhSEZkaWNtdG9kRXRSTGJ1MkVETEFHYWljNUp3SkNycHpBSUVUQ1AzaWE4NHQ0OG5qU2cvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNDJRTmV1TE9PRUU2YkNHNTk1QWFoaWNJUGZOUDdzdGdiM01Ca1RpYzZld3JoYzc2UWljaWFNZ1RGRHU0d3Bub1l5cGN2OFdHV3pBWkQxTVEvNjQw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X2pwZy9LU3lZZVBESjVIdXljVFN3S0swRGt6TWY0bUVYdmtDU0JodkZqT291WlB2UWZpY0pKYTNiQ3BWcVgwcmtuR0lqMFFLMFJYWVJlelNZaGljM1dhNlJ6OG93LzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNXJsamVCdzhPSGxSajNGeEU2N3RYOE9FQUVzTU43VWNMTngwemMzZnJVeDA0U2liYjNsbU11d3RZS0UwUGliQzJLdHFRbnp2dkhIaWFNUS82NDA?x-oss-process=image/format,png