React,你是对Redux情有独钟,还是对Zustand非你不嫁?

上集精彩

回顾上集:

上集说到了ReactHooks的使用。

本集继续

哎呀哎呀,去大东北和北京玩了半个月,过瘾了😁

该玩也玩了,接下来继续加油吧。

要是俺滴话:Zustand非你不嫁

啥是 Redux

Redux 是React最常用的集中状态管理工具,类似于Vue中的Pinia(Vuex),可以独立于框架运行 。通过集中管理的方式管理应用的状态。Redux是一个稳定、安全、可预测的的状态管理器

圆球相当于一个个组件,左图中组件中的状态分散、组件之间的调取比较麻烦。在大型应用中,往往会用Redux统一管理状态,如右图,不管你状态再多在分散,它都有一个核心的存放处Store,便于统一管理。

配套工具

  • 调试工具: 下载谷歌插件:Redux DevTools
  • 在React中使用redux,官方要求安装俩个其他插件:

Redux Toolkit(简写RTK 官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式)

react-redux(用来 链接 Redux 和 React组件 的中间件)

上手试试

cmd 复制代码
npx create-react-app react-redux
npm i @reduxjs/toolkit react-redux

通常在一个应用中,通常集中状态管理的部分都会单独创建一个单独的 store 目录;会有很多个子store模块,所以创建一个 modules 目录,在内部编写业务分类的子store;store中的入口文件 index.js 的作用是组合modules中所有的子模块,并导出store。

实现一个简易加减算数器

  • 目录结构
  • counterStore.js 采用 @reduxjs/toolkit 创建 counterStore:
  1. createSlice 直译就是创建reducer的切片
  2. 需要一个配置对象作为参数,通过对象的不同属性来指定它的配置
  3. name 用来自动生成action中的type
  4. initialState 初始化状态state
  5. reducers 指定state的各种操作,直接在对象中添加方法
  6. 操作中,会有两个参数:state一个代理对象,可直接修改;action会在下文提到
  • 配置根store并组合counterStore模块: configureStore 用于创建store对象,需要一个配置对象作为参数
  • 注入store(react-redux)react-redux负责把Redux和React连接起来,内置Provider组件,通过store参数把创建好的store实例注入到应用中,连接正式建立

这个时候打开调试工具Redux,你就会看到那个reducer了

  • 组件中使用store中的数据,需要用到一钩子函数 useSelector,它的作用是把store中的数据映射到组件中: 使用state中的数据
  • React组件修改store中的数据需要借助另外一个hook函数 useDispatch,它的作用是生成提交action对象的dispatch函数:
  • 提交action传参:在 reducers 的同步修改方法中添加action对象函数,在调用actionCreater的时候传递参数,参数会被传递到action对象payload属性上

redux 异步状态操作

  • 使用 @reduxjs/toolkit 创建 channelStore:
  • 创建根Store组合子模块:

Redux 中的数据加载问题

RTK Query是一个强大的数据获取和缓存工具。在它的帮助下,Web应用中的加载变得十分简单,它使我们不再需要自己编写获取数据和缓存数据的逻辑。

Web应用中加载数据时需要处理的问题:

  1. 根据不同的加载状态显示不同UI组件
  2. 减少对相同数据重复发送请求
  3. 使用乐观更新,提升用户体验(数据加载失败后保持原有数据显示)
  4. 在用户与UI交互时,管理缓存的生命周期(相当于实时更新数据并渲染)

这些问题,RTK Query都可以帮助我们处理。首先,可以直接通过RTKQ向服务器发送请求加载数据,并且RTKQ会自动对数据进行缓存,避免重复发送不必要的请求。其次,RTKQ在发送请求时会根据请求不同的状态返回不同的值,我们可以通过这些值来监视请求发送的过程并随时中止。

  • 创建Api切片:在 store/modules 下创建 channelApi.js
  • 在App.js中调用:

你会看到控制台会连续打印好几个对象,虽然对象中的属性都一样,但值会有变化。

  • 解构并将数据渲染到页面上:

俺在这就不多说了,想知道更多使用方法:官网:Redux Toolkit | Redux Toolkit (redux-toolkit.js.org)

还有数据持久化:redux-persist - npm (npmjs.com)

啥是 Zustand

这里俺就不介绍了,直接看官网介绍就行了,俺就直接开始撸代码了。

  • 创建store:通过 import { create } from "zustand"

异步请求

有个不严谨的地方不知道你有没有发现,如果初始状态多的话,使用 set 修改状态时,会出现错误(俺就说下,不演示了,就是会无法修改对应的状态)可以简单的修改下:

zustand --- 切片模式

当单个store比较大的时候,可以采用切片模式进行模块拆分组合,类似于模块化

不知道为啥,官网给的切片示例俺使不通,然后俺就小改了下,行了:

然后在组件中引入 useStore 并使用。

简化逻辑

  • 简化逻辑:Immer 中间件使您能够以更方便的方式使用不可变状态。此外,借助 Immer,您可以简化 Zustand 中不可变数据结构的处理
cmd 复制代码
npm install immer
  • 简化状态获取:
js 复制代码
const { count, price, increment, decrement, getTotal } = createCounterSlice();

状态获取指定值

  • 状态获取指定值:以防止组件重复加载

counterSlice.js 中添加个状态 color: "red"

上述代码就会造成组件重复加载,A组件只获取了不变的状态,B组件点击按钮时,B组件重新渲染,而A组件也会重新渲染并打印log,项目一但大了,这样就不行了。

  • 解决:需要借助 useShallow

运行后,点击按钮,不会log第二次 ----zustand----

使用Redux DevTools调试

  • 使用Redux DevTools调试:借助中间件 devtools

持久化存储

  • 持久化存储:借助中间件 persist
  • 仅存储指定属性:partialize
  • 指定某些属性不存储:
  • 存到哪:

静态方法 setState 和 getState

由于多个组件需要共同去使用或访问同一个状态属性,需要共享,所以把该状态或操作该状态的动作提取出来统一去管理,当当某一个动作只是再一个组件中使用:比如写一个加三的动作,该动作只在B组件中使用(同时官方也推荐这种方法)。

  • 将动作提取出来,并单独导出:

上述只是对 zustand 的简单使用,只要在平时的项目中够用就可以了。不会的话再查呗,官网:Zustand (pmnd.rs)

Redux 和 Zustand 更钟意哪个

看完两者的基本使用后,你不难发现,Zustand 相比较于 Redux 会更简单点儿。俺觉得它俩就相当于兄弟。看个人或公司吧,要是公司用的都是 Redux 那就可以不必在意 Zustand ,如果是个人的话,看个人意愿吧。俺会使用 Zustand 会更多点,它上手简单,更适合俺这种新手,同时初期俺也碰不到啥大型的项目。对于中小型的项目来说,Zustand 完全够够的了。但是要是大型项目的话,俺还是建议用 Redux。咋说呢,你可以不精通这两个,但你要都会用这两个(多学点,指定不会亏滴)

下集精彩

好了,停会了,累了😁

下篇俺会讲到哪些知识点呢: 由于刚结束半个月的穷游,精力有点跟不上,原谅解。只要懂得这篇的知识点就很棒了。

  • 俺会用一个案例,总结之前说的所有知识点。案例还是用的黑马的美团案例,只不过他用的状态管理是 Redux,俺会用 Zustand 重新写一遍
相关推荐
逐·風23 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨5 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js