（六）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组件

• 只负责UI的出现，不带有任何业务逻辑
  
• 没有状态（即不实用this.state，或界说 state）
  
• 全部数据都由 props 提供
  
• 倒霉用任何 Redux 的API
  

容器组件

• 负责管理数据和业务逻辑，不负责UI的出现
  
• 带有内部状态
  
• 利用 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