react的redux状态管理

状态管理(redux)

3.1、简介

Redux中文文档

2013年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。如果你的项目组件的数量和层级也变得越来越多，越来越深，此时组件间的数据通信就变得异常的复杂和低效，为了解决这个问题，引入了状态管理(redux)从而很好的解决多组件之间的通信问题。

 

 redux不是内嵌在react框架中，使用时需要手动去安装

npm i -S redux

三大原则

单一数据源

整个应用的 state 被储存在一棵对象结构中，并且这个对象结构只存在于唯一一个 store 中

State 是只读的

redux中的state  只读的  不可以直接修改

使用纯函数(reducer)来执行修改state

为了修改了state数据，redux定义了一个reducer函数来完成state数据的修改，reducer会接收先前的 state 和 action，并返回 新的 state

 纯函数

1. 多次调用函数,返回的结果是可控的(一致的)

2. 函数执行不会产生副作用(对别人产生影响)

3. 函数中的变量不使用外界的

操作原理图

不是响应式的

①、store通过reducer创建了初始状态

②、component通过store.getState()获取到了store中保存的state挂载在了自己的状态上

③、用户产生了操作，调用了actions 的方法

④、actions的方法被调用，创建了带有标示性信息的action（描述对象）

⑤、actions将action通过调用store.dispatch方法发送到了reducer中

⑥、reducer接收到action并根据标识信息判断之后返回了新的state

⑦、store的state被reducer更改为新state的时候，store.subscribe方法里的回调函数会执行，此时就可以通知component去重新获取state

---

 引入redux的store

1. 

 2. 

 3. 订阅

 4. 取消订阅

---

redux工具

 

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

 想使用插件需要在挂载时填上一句话用来监控

 然后

npm i -D redux-devtools-extension

import { composeWithDevTools } from 'redux-devtools-extension'

composeWithDevTools()

 

---

模块化

store

  |  mutation      修改state,里面提供了N多个函数

  |  reducer       reducer 定义处理数据的函数,专门给 createStore 方法参数1所用

  |  actions        组件调用用来生成 actionCreator 的 json对象

  |  index.js       入口文件

 拆出 reducer

 拆出 reducer 中的判断 mutation

 

 

 拆出 action 

 

 

 总结

 

---

react-redux(redux的插件)

网址：React Redux | React Redux

React-Redux是Redux的官方针对React开发的扩展库，默认没有在React项目中安装，需要手动来安装。react-redux是依赖于redux，所以你必须安装redux

你可以理解为react-redux就是redux给我们提供一些高阶组件，能解决的问题是：

使用它以后我们不需要在每个组件中再去手动订阅数据的更新了。

npm i -S react-redux  redux

 

 这个底层就是靠centext做的

 

 

---

案例--

 

 

 

 

 

 

---

redux中间件之 redux-thunk

5.1、介绍

redux默认支持同步操作，异步操作怎么办？Action发出以后，Reducer立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。怎么才能Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件。中间件有很多，这里使用一个 Redux 官方出品的 中间件库：redux-thunk

npm i -S redux-thunk

yarn add redux-thunk

 

---

---

【复习】!!!

第一步 建立一个仓库

在 src下 新建store文件夹,再建index.js文件

引入管理员reducer

把reducer挂在createStore上

导出store

第二个 招一个管理员

初始化reducer的数据

 

第三 使用

在组件内引入store

 组件内获取数据并赋值

渲染

 

记得插件要开

第四步 修改 

 修改1,传

 回到组件内

通过 dispatch 把数据 经过store仓库 派给 reducer

 

  修改1,收

 reducer 接收到数据

在reducer不能改state,所以要先 深拷贝 再修改

然后返回新的state

改完值 需要让 页面 知道 发生改变了

第五步 订阅更新

 调用一个函数 写在下面

  记得用箭头函数,修正this

---

 todolist 增加 

 

todolist 删除

 记得在action把index传过去

 reducer 接受数据 并删除

 

---

拆分出所有的action的type 变量名

优点: 便于管理,整洁,一旦出错会有报错提示,便于查找

 替换reducer中的action type

 替换组件内的action type

 

---

拆分出组件内所有的 action 

新建一个actions文件

优点: 统一管理

 组件内就变成了

 或

---

UI和逻辑的拆分

首先吧todolist的所有ui剪切走

粘贴到 todolistUi.js 文件中

源组件

 下一步就是把 数据 和 方法 通过 自定义属性 父传子

 子就是 把 所有的数据前面都改成 this.props 接收

---

把UI组件改成无状态函数组件,优化性能

---

 组件内原生redux网络请求

 

 

 

 

 需要在组件内不书写异步网络请求,耦合度太低所以才会用中间件

 

---

 redux-thunk

 

npm i -D redux-devtools-extension

原来我们是把我们向后台请求数据 axios 是写在组件内的生命周期里面,这种为什么说不完美呢,因为他是我们redux业务逻辑的一部分,但是因为redux要求必须reducer返回纯函数,所以没办法异步请求数据,但是有了中间件,我们就可以把异步写在中间件里.

 

---

react-redux(redux的插件)

使用它以后我们不需要在每个组件中再去手动订阅数据的更新了。

npm i -S react-redux  redux

 1

 2

 3

 

 4

 5

 

 6

 传给reducer

7

 8

 

 

 9

 10

 11

 

 12    当只有reder函数可以直接做成ui无状态组件,大大提升性能

---

redux-saga 简单使用

es7 使用 async await

 

 

 

 main

 

 

 

 说白了就是 async await

或 

 

 

 

 

---

 redux-saga 项目测试

 

 

 并发的   相当于 if else

 调用

  自动导入小saga

---

redux-saga 登录小案例

 

 

 

 

 

 

 二次解构!!!!

---

mobx    读音 : 膜拜科四

mobx5 不支持函数组件,是 面向对象,全用的装饰器

mobx6 为了支持hooks推出的 ,是 函数套函数

 mobx5

1. MobX 介绍 · MobX 中文文档1. MobX 介绍 · MobX 中文文档

MobX >=5 版本运行在任何支持 ES6 proxy 

npm i -S mobx@5 mobx-react@5

yarn add mobx@5 mobx-react@5

 

 

 

 叠加

 

 

 想解构必须绑定this

 

 

异步

  

 

 多人合作-拆分

 

 

 

 

 

 

 

 计算属性,类似vuex的getters

 

---

mobx6

为了支持hooks推出的 ,是 函数套函数

关于 MobX · MobX

yarn add mobx@6

mobx-react

 这里不用改

 

 加了这个

类该怎么写还是怎么写

 函数组件