feat: Zustand + Immer 示例

Author: wkylin

package-lock.json

@@ -331,6 +331,7 @@
     "html2canvas": "^1.4.1",
     "i18next": "^25.7.3",
     "i18next-browser-languagedetector": "^8.2.0",
+    "immer": "^11.1.3",
     "jsencrypt": "^3.5.4",
     "jspdf": "^3.0.4",
     "katex": "^0.16.27",

package.json

@@ -11,6 +11,11 @@ const ZustandDemo = () => {
   const isSidebarOpen = useStore((state) => state.isSidebarOpen)
   const toggleSidebar = useStore((state) => state.toggleSidebar)
 
+  const immerItems = useStore((state) => state.immerItems)
+  const pushImmerItem = useStore((state) => state.pushImmerItem)
+  const popImmerItem = useStore((state) => state.popImmerItem)
+  const clearImmerItems = useStore((state) => state.clearImmerItems)
+
   return (
     <FixTabPanel>
       <div className="flex flex-col gap-6 p-6">
@@ -41,6 +46,33 @@ const ZustandDemo = () => {
           </div>
           <div className="mt-4 text-gray-500">* 此状态已配置持久化，刷新页面后状态会保持。</div>
         </Card>
+
+        <Card title="Zustand + Immer 示例">
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center gap-6">
+              <Statistic title="Immer 列表长度" value={immerItems.length} />
+              <Space>
+                <Button onClick={pushImmerItem}>Push Item (immer)</Button>
+                <Button onClick={popImmerItem}>Pop Item</Button>
+                <Button onClick={clearImmerItems}>Clear</Button>
+              </Space>
+            </div>
+
+            <div className="mt-2">
+              <div className="text-sm text-gray-500">Items:</div>
+              <div className="mt-2 max-h-40 overflow-auto">
+                {immerItems.map((it) => (
+                  <div key={it.id} className="border-b py-1">
+                    {it.value}
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="mt-2 text-gray-500">
+              * 这里用的是 Zustand 的 `immer` middleware：`set(draft =&gt; draft.xxx = ...)`。
+            </div>
+          </div>
+        </Card>
       </div>
     </FixTabPanel>
   )

src/pages/zustand/index.tsx

@@ -1,17 +1,20 @@
 // src/store/index.ts
 import { create } from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
+import { immer } from 'zustand/middleware/immer'
 import { createCounterSlice } from './modules/counterSlice'
 import { createAppSlice } from './modules/appSlice'
+import { createImmerDemoSlice } from './modules/immerDemoSlice'
 import { StoreState } from './types'
 
 export const useStore = create<StoreState>()(
   devtools(
     persist(
-      (...a) => ({
-        ...createCounterSlice(...a),
-        ...createAppSlice(...a),
-      }),
+      immer((set, get, api) => ({
+        ...createCounterSlice(set, get, api),
+        ...createAppSlice(set, get, api),
+        ...createImmerDemoSlice(set, get, api),
+      })),
       {
         name: 'pro-react-admin-storage',
         partialize: (state) => ({ isSidebarOpen: state.isSidebarOpen }),

src/store/index.ts

@@ -2,7 +2,9 @@
 import { StateCreator } from 'zustand'
 import { StoreState, AppSlice, AppResponsive, Screens } from '../types'
 
-export const createAppSlice: StateCreator<StoreState, [], [], AppSlice & AppResponsive> = (set) => ({
+export const createAppSlice: StateCreator<StoreState, [['zustand/immer', never]], [], AppSlice & AppResponsive> = (
+  set
+) => ({
   isSidebarOpen: true,
   toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
   setSidebarOpen: (isOpen: boolean) => set({ isSidebarOpen: isOpen }),

src/store/modules/appSlice.ts

@@ -2,7 +2,10 @@
 import { StateCreator } from 'zustand'
 import { StoreState, CounterSlice } from '../types'
 
-export const createCounterSlice: StateCreator<StoreState, [], [], CounterSlice> = (set, get) => ({
+export const createCounterSlice: StateCreator<StoreState, [['zustand/immer', never]], [], CounterSlice> = (
+  set,
+  get
+) => ({
   count: 0,
   increment: () => set((state) => ({ count: state.count + 1 })),
   decrement: () => set((state) => ({ count: state.count - 1 })),

src/store/modules/counterSlice.ts

@@ -0,0 +1,20 @@
+import { StateCreator } from 'zustand'
+import { ImmerDemoSlice, StoreState } from '../types'
+
+export const createImmerDemoSlice: StateCreator<StoreState, [['zustand/immer', never]], [], ImmerDemoSlice> = (
+  set
+) => ({
+  immerItems: [],
+  pushImmerItem: () =>
+    set((state) => {
+      state.immerItems.push({ id: Date.now(), value: Math.random().toFixed(4) })
+    }),
+  popImmerItem: () =>
+    set((state) => {
+      state.immerItems.pop()
+    }),
+  clearImmerItems: () =>
+    set((state) => {
+      state.immerItems = []
+    }),
+})

src/store/modules/immerDemoSlice.ts

@@ -23,4 +23,16 @@ export interface AppResponsive {
   setIsMobile: (isMobile: boolean) => void
 }
 
-export type StoreState = CounterSlice & AppSlice & AppResponsive
+export interface ImmerItem {
+  id: number
+  value: string
+}
+
+export interface ImmerDemoSlice {
+  immerItems: ImmerItem[]
+  pushImmerItem: () => void
+  popImmerItem: () => void
+  clearImmerItems: () => void
+}
+
+export type StoreState = CounterSlice & AppSlice & AppResponsive & ImmerDemoSlice