React全家桶（六）redux状态管理

React全家桶

React全家桶	地址
React全家桶(一)之React入门	https://blog.csdn.net/article/124120080
React全家桶(二)之组件化编程	https://blog.csdn.net/article/124194107
React全家桶(三)之React脚手架	https://blog.csdn.net/article/124281588
React全家桶(四)之axios请求数据	https://blog.csdn.net/article/124281650
React全家桶(五)之React-router路由	https://blog.csdn.net/article/124453733
React全家桶(六)之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的三大原则：

• 单一数据源：整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store中。
• State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
• 使用纯函数来执行修改：为了描述 action 如何改变 state tree ，你需要编写 reducers。

使用场景：

• 某个组件的状态，需要共享；
• 某个状态需要在任何地方都可以拿到；
• 一个组件需要改变全局状态；
• 一个组件需要改变另一个组件的状态。

二、Redux的工作原理

分析

redux流程图如下：

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

• 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

• createStore 创建一个store
• store.dispatch() 帮助我们派发一个action
• store.getState() 帮助我们获取到state里面所有的数据内容
• store.subscribe 可以订阅 store数据的改变 ，只要数据发生改变，store.subscribe接受的回调函数就会被执行

react-redux

一、什么是react-redux？

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

• redux是react中进行state状态管理的JS库，一般是管理多个组件中共享数据的，它并不是react的插件，是一个独立的库vue和angular等等一些框架都是可以使用的。
• React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。

二、react-redux的工作原理

分析

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

1. react-redux整体执行流程

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

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

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

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

三、React容器组件和UI组件

• React-Redux把所有的组件都拆分成了两大类：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：

• 在单个组件使用redux的基础上，每个组件的action、reducer单独定义。
• 多个组件的共同状态都存放在唯一的store里面。
• 汇总所有的reducer变为一个总的reducer，进行统一的暴露。
• 多个组件的action共用一个constant，定义action中的type类型。

五、核心API

• createStore 创建一个store
• store.dispatch() 帮助我们派发一个action
• store.getState() 帮助我们获取到state里面所有的数据内容
• store.subscribe 可以订阅 store数据的改变 ，只要数据发生改变，store.subscribe接受的回调函数就会被执行
• composeWithDevTools 引入Redux DevTools，是一款用于调试的浏览器插件,它用来时时显示当前应用的state信息,action触发记录以及state的变化
• applyMiddleware Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。
• combineReducers 汇总所有的reducer变为一个总的reducer