feat: 集成 zustand 状态管理

package.json

@@ -65,7 +65,7 @@
     "react-error-boundary": "^3.1.4",
     "react-query": "^3.39.2",
     "react-redux": "^8.0.2",
-    "zustand": "^4.0.0"
+    "zustand": "^4.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.12",

src/app.tsx

@@ -3,17 +3,14 @@ import type { FC, PropsWithChildren } from 'react'
 
 import { AppLayout } from '@/layouts/AppLayout'
 import { QueryProvider } from '@/providers/QueryProvider'
-import { ZustandProvider } from '@/providers/ZustandProvider'
 
 import './app.css'
 
 const App: FC<PropsWithChildren<{}>> = ({ children }) => (
   <QueryProvider>
-    <ZustandProvider>
-      <StrictMode>
-        <AppLayout>{children}</AppLayout>
-      </StrictMode>
-    </ZustandProvider>
+    <StrictMode>
+      <AppLayout>{children}</AppLayout>
+    </StrictMode>
   </QueryProvider>
 )
 

src/sub-packages/state-management/zustand/App.tsx

@@ -1,8 +1,47 @@
 import type { FC } from 'react'
-import { View, Text } from '@tarojs/components'
+import { View, Text, Button } from '@tarojs/components'
+import { useCounterStore } from './hooks/useCounterStore'
+
+const Increment: FC = () => {
+  const { value, increment } = useCounterStore()
+  return (
+    <>
+      <Text>{value}</Text>
+      <Button className="mt-2" onClick={increment}>
+        +
+      </Button>
+    </>
+  )
+}
+
+const Decrement: FC = () => {
+  const { value, decrement } = useCounterStore()
+  return (
+    <>
+      <Text className="mt-2">{value}</Text>
+      <Button className="mt-2" onClick={decrement}>
+        -
+      </Button>
+    </>
+  )
+}
+
+const IncrementByAmount: FC = () => {
+  const { value, incrementByAmount } = useCounterStore()
+  return (
+    <>
+      <Text className="mt-2">{value}</Text>
+      <Button className="mt-2" onClick={() => incrementByAmount(3)}>
+        +3
+      </Button>
+    </>
+  )
+}
 
 export const App: FC = () => (
   <View className="flex h-screen flex-col items-center justify-center">
-    <Text>zustand</Text>
+    <Increment />
+    <Decrement />
+    <IncrementByAmount />
   </View>
 )

src/sub-packages/state-management/zustand/hooks/useCounterStore.ts

@@ -0,0 +1,29 @@
+import create from 'zustand'
+import { persist } from 'zustand/middleware'
+import { getStorageSync, setStorageSync, removeStorageSync } from '@tarojs/taro'
+
+interface CounterState {
+  value: number
+  increment: () => void
+  decrement: () => void
+  incrementByAmount: (payload: number) => void
+}
+
+export const useCounterStore = create(
+  persist<CounterState>(
+    (set) => ({
+      value: 0,
+      increment: () => set((state) => ({ value: state.value + 1 })),
+      decrement: () => set((state) => ({ value: state.value - 1 })),
+      incrementByAmount: (payload: number) => set((state) => ({ value: state.value + payload })),
+    }),
+    {
+      name: 'zustand/persist/counter',
+      getStorage: () => ({
+        getItem: getStorageSync,
+        setItem: setStorageSync,
+        removeItem: removeStorageSync,
+      }),
+    },
+  ),
+)