React-Native项目为什么要使用redux

淡淡的烟草味﹌ 2021-12-20 06:49 468阅读 0赞

对于一些页面较多、功能复杂，组件之间交互频繁且结构复杂的App，通过修改state的方式重新渲染页面,就会出现卡到爆炸的效果，这时就要使用redux了。

下面,我们来看一下使用了redux的APP结构,下面是我按照我的理解画了一张图,多出来右边三个部分,原来container外层多了一个Provide

![501999-20180308150338677-1967347047.jpg][]

### Provider ###

Provider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，它的工作概括起来很简单，就是使得原组件变得可以接受Redux的store作为props。

Provider内的任何一个组件,如果需要使用state中的数据,必须先将该组件,使用connect方法将其与store中的state绑定到一起.使得组件和store中的state对应起来.

按照我个人的理解,使用provider包装一层以后,原组件的state可以放在组件的props中去传递,并且仍保持更新state重新渲染页面的特性.使得我们可以通过调用props中的action来改变state对应的组件的显示效果.高效率的解决了多组件多页面之间数据交互困难的问题.

### Store ###

在 Redux 应用中，只允许有一个 store 对象，管理应用的 state.可以理解为一个存放APP内所有组件的state的仓库.

可以通过 combineReducers(reducers) 来实现对 state 管理的逻辑划分（多个 reducer）。

### Action（行动、活动，功能、作用） ###

在这里它起到了一个数据的预处理功能,将所有的操作行为,或者事件类型,分门别类的区分开.

### Reducer ###

reducer就是迎接 action 函数返回的线索的 "数据 真·处理函数"， action 是"预处理"。行为在被action分门别类以后,

reducer根据数据的类型,去执行不同的处理过程并返回新的state.

## redux各模块之间的联系 ##

![501999-20180308153754366-1352238570.jpg][]

将整个项目分为两个部分，左边：Provider包装后的视图部分；右边：store,reducer,action构成的逻辑部分.(此处逻辑仅仅代表组件state处理的逻辑部分)

![501999-20180308154709994-278770565.jpg][]

Redux运作：

首先store中维护了一个state，

我们在组件内dispatch一个action,

store获取这个action后,dispatch到actions中,预处理判断该action的type,

并返回判断结果给store.store

通过接收到的actionType去reducer中寻找对应的处理过程.

经reducer处理后,返回新的state给store.store根据新state.

转载于:https://www.cnblogs.com/fenglh04/p/redux.html

[501999-20180308150338677-1967347047.jpg]: /images/20211220/390c15dd27c643d49c015e3ccb342f6b.png
[501999-20180308153754366-1352238570.jpg]: /images/20211220/63eb9c41581840f3848dc631693ec328.png
[501999-20180308154709994-278770565.jpg]: /images/20211220/2ad85b363f824e5d884173d99e7d5b1d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，468人围观）

还没有评论，来说两句吧...

相关阅读

相关为什么vue前端项目要使用Nodejs

一、传统的JavaScript 传统的js是运行在浏览器上的，因为浏览器内核分为两个部分：渲染引擎—渲染HTML和CSS, JavaScript 引擎—负

àì夳堔傛蜴生んèń/ 2024年02月20日 10:12/ 0 赞/ 165 阅读

相关为什么要在项目中使用TypeScript？

随着越来越多的开发人员采用TypeScript，人们需要了解在下一个项目中应该使用TypeScript的原因。尽管它在早期应用中遇到了一些阻力，但在过去十年，它迅速成为一种广泛

约定不等于承诺〃/ 2024年02月17日 12:34/ 0 赞/ 126 阅读

相关为什么要使用 php反射_为什么要使用PHP？

为什么要使用 php反射 Now that you are comfortable using HTML on your website, it is time to tac

港控/mmm°/ 2022年12月06日 15:23/ 0 赞/ 365 阅读

相关为什么要转型项目经理

首先说天花板。任何职业都是有天花板的，程序员当然也有。初级程序员负责一部分功能中级程序员负责几块功能，或者一个项目高级程序员负责几个项目项目经理

短命女/ 2022年11月14日 14:44/ 0 赞/ 242 阅读

相关为什么要使用 JavaScript

当我还是一个初出茅庐的程序员时，我想掌握自己所用语言的每个特性。我写程序时会尝试使用所有的特性。我认为这是炫耀的好方法，而我也的确出了不少风头，因为我对各个特性了如指掌，谁有问

我就是我/ 2022年08月07日 06:48/ 0 赞/ 359 阅读

相关为什么要使用docker

为什么要使用docker 一个简单的例子假设用户/开发者试图基于最常见的LAMP（Linux+Apache+MySQL+PHP）组合来搭建一个网站。按照传统的

逃离我推掉我的手/ 2022年07月13日 11:17/ 0 赞/ 362 阅读

相关为什么要使用补码

想必对于原码，反码，补码大家并不陌生，计算机专业的同学都会学到这方面的一些知识。当初在学这部分的时候，只知道用补码可以解决0和-0的问题，但是还是没明白为什么会想到用补码。

女爷i/ 2022年06月02日 03:58/ 0 赞/ 362 阅读

相关 React-Native项目为什么要使用redux

对于一些页面较多、功能复杂，组件之间交互频繁且结构复杂的App，通过修改state的方式重新渲染页面,就会出现卡到爆炸的效果，这时就要使用redux了。下面,我们来看一下使

淡淡的烟草味﹌/ 2021年12月20日 06:49/ 0 赞/ 469 阅读

相关为什么要使用rem

模仿网易移动端的的写法： html { font-size: 13.33333vw } @media screen and

短命女/ 2021年06月26日 16:06/ 0 赞/ 658 阅读

相关为什么要使用 Docker

作为一种新兴的虚拟化方式，Docker 跟传统的虚拟化方式相比具有众多的优势。更高效的利用系统资源更快速的启动时间

朱雀/ 2020年05月17日 08:27/ 1 赞/ 2576 阅读