🔥React全家桶🔥

React全家桶地址React全家桶(一)之React入门🔥https://blog.csdn.net/article/124120080React全家桶(二)之组件化编程🔥https://blog.csdn.net/article/124194107React全家桶(三)之React脚手架🔥https://blog.csdn.net/article/124281588React全家桶(四)之axios请求数据🔥https://blog.csdn.net/article/124281650React全家桶(五)之React-router路由🔥https://blog.csdn.net/article/124453733React全家桶(六)之redux状态管理🔥https://blog.csdn.net/article/124454379

redux状态管理

✍目录总览：

redux

为什么使用Redux：

使用react进行大型项目开发时，需要管理的状态不仅数量很多而且相互共享，一个状态多个组件都要共享使用并且渲染，管理不断变化的 state 非常困难。所以我们需要把 state 进行统一管理，这样才能控制每一个state的变化，让我们的程序可读性更强，出错率更低。

一、什么是Redux？

Redux 是一个 JS 库，一个状态容器。

作用： 集中式管理 React 应用中 多个组件共享的状态

（1）它可以和 react，vue，angular 等一起使用，但一般都和 react一起使用 。
（2）Redux 可以 解耦 React（View层）于数据管理和对数据的操作，保持View层的纯净，让每一个组件的职责划分更加清楚，同时又降低了React数据传递的难度和不可控性
（3）Redux 采用了中间件机制，既保证了代码的简洁，又增加了可扩展性。

Redux的三大原则：

使用场景：

二、Redux的工作原理

分析

redux流程图如下：

1. redux的三个关键函数：getState()、subscribe()、dispatch()

2. Redux整体执行流程

（1）用户通过事件触发ActionCreator制造action

（2）同时，用户触发的事件内调用dispatch来派发action

（3）reducer接收action，并处理state返回newState

（4）View层通过getState( )来接收newState并重新渲染视图层

三、Redux文件分析

四、Redux流程解析

单个组件使用redux：

（1）创建redux的核心store对象，store集中管理状态。那状态从哪来呢？Reducer

（2）创建Reducer，定义状态的初值、处理状态的方法。 Reducer是只负责执行，那需要判断的东西从哪来呢？Action

（3）在创建Action之前，我们需要创建constant.js定义action中的type类型。

（4）创建Action，对定义好的方法进行封装。 那封装好的函数去哪里用呢？在组件中使用

（5）在组件中绑定事件（dispatch（）引用封装函数，处理状态），使用getState() 获取最新状态

（6）使用subscribe()订阅store，监听根组件（最外部），只要状态发生改变，就调用render重新渲染组件。

五、核心API

react-redux

一、什么是react-redux？

首先说一下redux和react-redux的区别：

二、react-redux的工作原理

分析

react-redux流程图如下：（多组件共享状态）

1. react-redux整体执行流程

（1）用户通过事件触发ActionCreator制造action

（2）同时，用户触发的事件内调用dispatch来派发action

（3）reducer接收action，并处理state返回newState

（4）View层通过getState( )来接收newState并重新渲染视图层

三、React容器组件和UI组件

UI组件

1. 只负责UI的呈现，不带有任何业务逻辑
2. 没有状态（即不适用this.state，或定义 state）
3. 所有数据都由 props 提供
4. 不使用任何 Redux 的API

容器组件

1. 负责管理数据和业务逻辑，不负责UI的呈现
2. 带有内部状态
3. 使用 Redux 的API

如何定义容器组件

通过connect方法自动生成容器组件 对 UI组件的增强

connect接收两个参数：
（1）mapStateToProps：负责输入逻辑，即把 state 映射到 UI组件的参数（props）
（2）mapDispatchToProps：负责输出逻辑，即 把用户对UI组件的操作映射成 action

const Container = connect(mapStateToProps,mapDispatchToProps)(Counter)

四、react-redux流程解析

单个组件使用redux：

（1）创建redux的核心store对象，store集中管理状态。那状态从哪来呢？Reducer

（2）创建Reducer，定义状态的初值、处理状态的方法。 Reducer是只负责执行，那需要判断的东西从哪来呢？Action

（3）在创建Action之前，我们需要创建constant.js定义action中的type类型。

（4）创建Action，对定义好的方法进行封装。 那封装好的函数去哪里用呢？在组件中使用

（5）在组件中绑定事件（dispatch引用封装函数，处理状态），使用getState() 获取最新状态

（6）使用subscribe()订阅store，监听根组件（最外部），只要状态发生改变，就调用render重新渲染组件。

单个组件使用redux：

五、核心API