immer example for createSliceWithImmer

zustandjs · Jul 10, 2024 · da75939 · da75939
1 parent 29f11af
commit da75939
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 0 deletions.
diff --git a/examples/04_immer/index.html b/examples/04_immer/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04_immer/package.json b/examples/04_immer/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "zustand": "latest",
+    "zustand-slices": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest"
+  },
+  "scripts": {
+    "dev": "vite"
+  }
+}
diff --git a/examples/04_immer/src/app.tsx b/examples/04_immer/src/app.tsx
@@ -0,0 +1,59 @@
+import { create } from 'zustand';
+import { withSlices } from 'zustand-slices';
+import { createSliceWithImmer } from 'zustand-slices/immer';
+
+const countSlice = createSliceWithImmer({
+  name: 'count',
+  value: {
+    count: 0
+  },
+  actions: {
+    inc: () => (state) => {
+      state.count += 1;
+    },
+    reset: () => () => ({ count: 0 }),
+    },
+});
+
+const textSlice = createSliceWithImmer({
+  name: 'text',
+  value: 'Hello',
+  actions: {
+    updateText: (newText: string) => () => newText,
+    reset: () => () => 'Hello',
+  },
+});
+
+const useCountStore = create(withSlices(countSlice, textSlice));
+
+const Counter = () => {
+  const { count } = useCountStore((state) => state.count);
+  const text = useCountStore((state) => state.text);
+  const { inc, updateText, reset } = useCountStore.getState();
+  return (
+    <>
+      <p>
+        Count: {count}
+        <button type="button" onClick={inc}>
+          +1
+        </button>
+      </p>
+      <p>
+        <input value={text} onChange={(e) => updateText(e.target.value)} />
+      </p>
+      <p>
+        <button type="button" onClick={reset}>
+          Reset
+        </button>
+      </p>
+    </>
+  );
+};
+
+const App = () => (
+  <div>
+    <Counter />
+  </div>
+);
+
+export default App;
diff --git a/examples/04_immer/src/main.tsx b/examples/04_immer/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/04_immer/tsconfig.json b/examples/04_immer/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es2018",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}