zustand 搞定 react 中复杂状态管理

本文主要是介绍zustand 搞定 react 中复杂状态管理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Zustand 是一个轻量级的、无依赖的状态库，适用于 React 和函数式编程。它提供了一个简单、灵活的方式来管理应用程序的状态。本文就讲讲如何使用 zustand 搞定 react 中复杂状态管理，进而替代 redux 。

一、前言

以 redux 为代表的这类单向数据流状态管理库，都是需要在最外层（根组件）包一个 Provider ， Context 中的值都在 Provider 的作用域下有效，这样才能做到数据状态共享。
Zustand 则另辟蹊径，默认不需要 Provider，就想 Vue 中 pinia 状态管理库一样，直接声明一个 hooks 式的 useStore 后就可以在不同组件中进行调用，并且保持它们的状态共享和响应式更新。

Zustand 在德语中是 state 状态的意思

二、Zustand 基本使用

1. 定义 Store 数据

// src/store/user.jsimport { create } from 'zustand'const initData = {userInfo: {},token: '',
}export const useUserStore = create((set, get) => ({...initData,setUserInfo: (userInfo) => set({ userInfo }),getUsername: () => {return get().userInfo?.username}
}))

2. 在组件中使用

import {useUserStore} from '@/store/user.js'
import axios from "axios";const Component = () => {const {token, setUserInfo, getUsername} = useUserStore()const userInfo = useUserStore((state)=>state.userInfo)const fetchUser = async () => {let state = useUserStore.getState()const { data } = await axios({url: '/xxx',headers: {'access-token': state.token,}})setUserInfo(data)}return (<div>用户：{getUsername()}</div>)
}export default Component

注意：

1. 在 react hook 组件中函数体内部使用全局的 state，需要使用 getState() 方法获取，否则获取的是初始化的 state 值。
2. zustand 的 state 是响应式的，所以可以直接在 jsx ui 中使用解构的 state 值 ，但是在非 jsx 中需要使用 getState() 方法获取最新状态。

三、Zustand 进阶用法

适用于跨组件数据共享、数据监听操作。

数据监听需要使用 subscribeWithSelector 包裹，否则不能细粒度监听。

const unsub1 = useDogStore.subscribe(console.log)

1. 定义 Store 数据

// src/store/dialog.jsimport { create } from 'zustand'
import { subscribeWithSelector } from 'zustand/middleware'const initData = {newDialogVisible: false,newFormData: null,
}export const useDialogStore = create(subscribeWithSelector((set, get) => ({...initData,changeNewDialog(visible, data = null) {set({ newDialogVisible: visible, newFormData: data })},}))
)

2. 设置数据

import { forwardRef, useImperativeHandle, useState } from 'react'
import { Button, Form } from 'antd'
import { useDialogStore } from '@/store/dialog.js'const Dialog = (props, ref) => {useImperativeHandle(ref, () => ({showModal,}))const [form] = Form.useForm()const { changeNewDialog } = useDialogStore()const showModal = (data) => {changeNewDialog(true, {})}return (<><Button onClick={showModal} htmlType="submit">新建</Button></>)
}export default forwardRef(Dialog)

3. 监听数据变化

import { Breadcrumb } from 'antd'
import Side from './components/Side.jsx'
import List from './components/List.jsx'
import NewDialog from './components/NewDialog.jsx'
import { useEffect, useRef } from 'react'
import { useDialogStore } from '@/store/dialog.js'
import { shallow } from 'zustand/shallow'const Page = () => {const newDialogRef = useRef()useEffect(() => {// 监听数据变化const unsub = useDialogStore.subscribe((state) => [state.newDialogVisible, state.newFormData],([visible, data]) => {if (visible) {// console.log(visible, data)newDialogRef.current.showModal(data)}},{ equalityFn: shallow } // 浅比较)return () => {// 取消订阅unsub()}}, [])return (<><Breadcrumbitems={[{title: '首页',},{title: <a href="/">列表</a>,},]}/><div className="border-b-[1px] border-solid border-gray-300 ml-[-20px] mr-[-20px] mt-[15px]"></div><div className="flex justify-between"><Side /><List /></div><NewDialog ref={newDialogRef} /></>)
}export default Page

4. 其他用法

import { subscribeWithSelector } from 'zustand/middleware'
const useDogStore = create(subscribeWithSelector(() => ({ paw: true, snout: true, fur: true }))
)// Listening to selected changes, in this case when "paw" changes
const unsub2 = useDogStore.subscribe((state) => state.paw, console.log)
// Subscribe also exposes the previous value
const unsub3 = useDogStore.subscribe((state) => state.paw,(paw, previousPaw) => console.log(paw, previousPaw)
)
// Subscribe also supports an optional equality function
const unsub4 = useDogStore.subscribe((state) => [state.paw, state.fur],console.log,{ equalityFn: shallow }
)
// Subscribe and fire immediately
const unsub5 = useDogStore.subscribe((state) => state.paw, console.log, {fireImmediately: true,
})

四、在 React 组件外使用

在 axios 或路由守卫中通常需要获取/设置全局的 token 和用户信息，使用 zustand 可以这样做：

1. 获取状态

// react 组件外直接取值
const token = useUserStore.getState().token

2. 设置更新状态

// react 组件外更新值
useUserStore.setState({ userInfo: data })

参考文档：

• https://www.npmjs.com/package/zustand
• https://mp.weixin.qq.com/s/bqPJWzWWBk_dnKUBq0btPg
• https://zhuanlan.zhihu.com/p/591981209
• https://www.jianshu.com/p/516c85c50da8

---

欢迎访问：天问博客

这篇关于zustand 搞定 react 中复杂状态管理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---