feat: integrate immer store into App component and update layout

Author: ZingerLittleBee

src/App.tsx

@@ -1,5 +1,8 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { useBoundStore } from '@/store'
+import { useImmerStore } from '@/store/immer/immer-store'
+import usePersistStore from '@/store/persist/persist-store'
 import { invoke } from '@tauri-apps/api/core'
 import { useState } from 'react'
 import {
@@ -10,15 +13,15 @@ import {
   CardTitle
 } from './components/ui/card'
 import { Label } from './components/ui/label'
-import { useBoundStore } from './store'
-import usePersistStore from './store/persist/persist-store'
 
 function App() {
   const [greetMsg, setGreetMsg] = useState('')
   const [name, setName] = useState('')
   const bears = useBoundStore.use.bears()
   const addBear = useBoundStore.use.addBear()
 
+  const { position, setX, setY } = useImmerStore()
+
   const { fishes, addFish } = usePersistStore()
 
   async function greet() {
@@ -27,7 +30,7 @@ function App() {
   }
 
   return (
-    <main className="container flex h-screen flex-col items-center justify-center gap-8">
+    <main className="flex h-screen flex-col items-center justify-center gap-8">
       <div className="text-center">
         <h1 className="text-2xl font-bold">Welcome to Tauri + Vite</h1>
         <h2 className="text-lg font-medium">
@@ -67,11 +70,15 @@ function App() {
         </Button>
       </div>
       <p>Click on the Tauri, Vite, and React logos to learn more.</p>
-      <div className="flex w-[400px] items-center justify-center gap-2">
-        <Card className="w-full">
+      <div className="grid grid-cols-3 gap-4">
+        <Card>
           <CardHeader>
             <CardTitle>Normal Store</CardTitle>
-            <CardDescription>This store is memory-only.</CardDescription>
+            <CardDescription>
+              This store is memory-only.
+              <br />
+              <br />
+            </CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col gap-2">
             <Label>Bears: {bears}</Label>
@@ -80,7 +87,7 @@ function App() {
             </Button>
           </CardContent>
         </Card>
-        <Card className="w-full">
+        <Card>
           <CardHeader>
             <CardTitle>Persist Store</CardTitle>
             <CardDescription>
@@ -94,6 +101,27 @@ function App() {
             </Button>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Immer Store</CardTitle>
+            <CardDescription>
+              This store is using Immer to manage state.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2">
+            <Label>
+              Position: {position.x}, {position.y}
+            </Label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setX(position.x + 1)}>
+                Move X
+              </Button>
+              <Button variant="outline" onClick={() => setY(position.y + 1)}>
+                Move Y
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
       </div>
 
       <form

src/store/immer/immer-store.ts

@@ -1,4 +1,5 @@
 import { create, StateCreator } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
 import { createPositionSlice, PositionSlice } from './position'
 
 type ImmerStore = PositionSlice
@@ -10,6 +11,8 @@ export type ImmerCreator<T extends Partial<ImmerStore>> = StateCreator<
   T
 >
 
-export const useImmerStore = create<ImmerStore>()((...a) => ({
-  ...createPositionSlice(...a)
-}))
+export const useImmerStore = create<ImmerStore>()(
+  immer((...a) => ({
+    ...createPositionSlice(...a)
+  }))
+)

src/store/immer/position.ts

@@ -8,24 +8,15 @@ type State = {
 }
 
 type Actions = {
-  setPosition: (x: number, y: number) => void
   setX: (x: number) => void
   setY: (y: number) => void
-  moveBy: (deltaX: number, deltaY: number) => void
-  reset: () => void
 }
 
 export type PositionSlice = State & Actions
 
 export const createPositionSlice: ImmerCreator<PositionSlice> = (set) => ({
   position: { x: 0, y: 0 },
 
-  setPosition: (x: number, y: number) =>
-    set((state) => {
-      state.position.x = x
-      state.position.y = y
-    }),
-
   setX: (x: number) =>
     set((state) => {
       state.position.x = x
@@ -34,17 +25,5 @@ export const createPositionSlice: ImmerCreator<PositionSlice> = (set) => ({
   setY: (y: number) =>
     set((state) => {
       state.position.y = y
-    }),
-
-  moveBy: (deltaX: number, deltaY: number) =>
-    set((state) => {
-      state.position.x += deltaX
-      state.position.y += deltaY
-    }),
-
-  reset: () =>
-    set((state) => {
-      state.position.x = 0
-      state.position.y = 0
     })
 })