Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

immer example for createSliceWithImmer #26

Merged
merged 7 commits into from
Jul 11, 2024
Merged

immer example for createSliceWithImmer #26

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
da75939
immer example for createSliceWithImmer
Ebubekir-Tas Jul 10, 2024
faa23c5
formatting
Ebubekir-Tas Jul 10, 2024
ef620da
add immer to dependencies
Ebubekir-Tas Jul 10, 2024
43a1cb5
immer example
Ebubekir-Tas Jul 10, 2024
341f129
.
Ebubekir-Tas Jul 10, 2024
6ce615d
update script for immer example in root package.json
Ebubekir-Tas Jul 10, 2024
4830029
chore: package.json in the example
dai-shi Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions examples/04_immer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 21 additions & 0 deletions examples/04_immer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "example",
"version": "0.0.0",
"private": true,
"type": "module",
"dependencies": {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need "immer" too.

Copy link
Contributor Author

@Ebubekir-Tas Ebubekir-Tas Jul 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added immer as a dependency in the examples folder, I need to also add

    "examples:01_counter": "DIR=01_counter vite",
    "examples:02_async": "DIR=02_async vite",
    "examples:03_actions": "DIR=03_actions vite",
    "examples:04_immer": "DIR=04_immer vite"

to the root package.json but it seems something desynced my local branch to this pull request and I'm hesitant to make any force pushes (fixed)

I ran the example locally and it worked fine. Noteworthy that to run it in windows the script is

"examples:04_immer": "set DIR=04_immer&& vite"

edit: I also see stackblitz URLs in the README, but the new createSliceWithImmer method right now isn't included in the latest published version on NPM so it isn't yet accessible without a local clone using npm link so the method is not accessible on stackblitz right now

"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"
}
}
59 changes: 59 additions & 0 deletions examples/04_immer/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 10 additions & 0 deletions examples/04_immer/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>,
);
14 changes: 14 additions & 0 deletions examples/04_immer/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
Loading