状态管理(redux)
3.1、简介
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是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推出的 ,是 函数套函数
yarn add mobx@6
mobx-react
这里不用改
加了这个
类该怎么写还是怎么写
函数组件