Redux原理与应用

一般的React-native结构

未使用redux的react-native项目,大概可以概括一下就是整个APP作为容器,里面存放有多个父组件,子组件,孙子组件,各个组件都含有state和props这两个最重要的属性.

image.png

props的流向

React有props和state: props意味着父级分发下来的属性，state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，也就是说数据只能单向向下分发，或者自行内部消化state的变化会引起页面的刷新

产生的问题：
组件之间交互比较困难,当APP中页面较多,页面内组件比较复杂,通过修改state的方式重新渲染页面,就会出现卡到爆炸的效果.所以这种方式只适合实现一些功能相对单一,页面简介,页面之间交互较少,结构简单的APP.

20200416141207.jpg

使用redux的app结构

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

20200416141415.jpg

redux的概念和使用

37932444b5c747f9b5f074d488e512d6_r.jpg 692680498-578ef239951f7_articlex.jpeg 2797267535-578ef2361a531_articlex.jpeg

Action（普通Action、异步Action）
普通Action，本质是JS普通对象
异步Action，使用了 Thunk middleware 异步 action
一般由方法生成
必须有一个type
是行为的抽象
Reducer
( previousState, action ) => newState
处理数据逻辑
拆分和合并reducer（用 ES6 的 import、export 语法，非常方便）
是响应的抽象
Store
联系Action与Reducer的对象，为应用提供state
Action作用于store
Reducer根据store响应
store是唯一的
Store包括了完整的state
state完全可以预测
Provider
整个App的容器
用connect将组件与store中的state绑定到一起.使得组件和store中的state对应起来.
组件
Container 和Component

redux各模块之间的联系

image.png

运作说明：
1.首先store中维护了一个state，我们在组件内dispatch一个action,
2.store获取这个action后,dispatch到actions中,预处理判断该action的type,并返回判断结果给store.
3.store通过接收到的actionType去reducer中寻找对应的处理过程.经reducer处理后,返回新的state给store.
4.store根据新state.

image.png

redux使用的场景

20200416141945.jpg

redux中间件

它提供的是位于 action 被发起之后，到达 reducer 之前的扩展。
中间件的设计使用了非常多的函数式编程的思想，包括：高阶函数，复合函数项目中主要使用了三个中间件，分别解决不同的问题。
thunkMiddleware：处理异步Action
loggerMiddleware：开发环境调试使用，控制台输出应用state日志

apiMiddleware：统一处理API请求。一般情况下，每个 API 请求都至少需要 dispatch 三个不同的 action（请求前、请求成功、请求失败），通过这个中间件可以很方便处理。

前端框架

image.png

组件

20200416142406.jpg