Merge pull request #3523 from MortezaMirjavadi/demo

Add zustand and redux-toolkit to the demo.

demo/index.jsx

@@ -25,6 +25,8 @@ import SuspenseRouterBug from './suspense-router';
 import NestedSuspenseBug from './nested-suspense';
 import Contenteditable from './contenteditable';
 import { MobXDemo } from './mobx';
+import Zustand from './zustand';
+import ReduxToolkit from './redux_toolkit';
 
 let isBenchmark = /(\/spiral|\/pythagoras|[#&]bench)/g.test(
 	window.location.href
@@ -135,6 +137,12 @@ class App extends Component {
 						<Link href="/contenteditable" activeClassName="active">
 							contenteditable
 						</Link>
+						<Link href="/zustand" activeClassName="active">
+							zustand
+						</Link>
+						<Link href="/redux-toolkit" activeClassName="active">
+							redux-toolkit
+						</Link>
 					</nav>
 				</header>
 				<main>
@@ -165,6 +173,8 @@ class App extends Component {
 						<SuspenseRouterBug path="/suspense-router" />
 						<NestedSuspenseBug path="/nested-suspense" />
 						<Contenteditable path="/contenteditable" />
+						<Zustand path="/zustand" />
+						<ReduxToolkit path="/redux-toolkit" />
 					</Router>
 				</main>
 			</div>

demo/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@material-ui/core": "4.9.5",
+    "@reduxjs/toolkit": "^2.2.3",
     "d3-scale": "^1.0.7",
     "d3-selection": "^1.2.0",
     "htm": "2.1.1",
@@ -26,7 +27,8 @@
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
     "redux": "^4.0.1",
-    "styled-components": "^4.2.0"
+    "styled-components": "^4.2.0",
+    "zustand": "^4.5.2"
   },
   "volta": {
     "extends": "../package.json"

demo/redux-toolkit.js

@@ -0,0 +1,60 @@
+import { createElement } from 'preact';
+import { Provider, useSelector } from 'react-redux';
+import { configureStore, createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+	value: 0
+};
+const counterSlice = createSlice({
+	name: 'counter',
+	initialState,
+	reducers: {
+		increment: state => {
+			state.value += 1;
+		},
+		decrement: state => {
+			state.value -= 1;
+		}
+	}
+});
+const store = configureStore({
+	reducer: {
+		counter: counterSlice.reducer
+	}
+});
+
+function Counter({ number }) {
+	const count = useSelector(state => state.counter.value);
+	return (
+		<div>
+			Counter #{number}:{count}
+		</div>
+	);
+}
+
+export default function ReduxToolkit() {
+	function increment() {
+		store.dispatch(counterSlice.actions.increment());
+	}
+	function decrement() {
+		store.dispatch(counterSlice.actions.decrement());
+	}
+	function incrementAsync() {
+		setTimeout(() => {
+			store.dispatch(counterSlice.actions.increment());
+		}, 1000);
+	}
+	return (
+		<Provider store={store}>
+			<div>
+				<h1>Redux Toolkit</h1>
+				<h1>Counter</h1>
+				<Counter number={1} />
+				<Counter number={2} />
+				<button onClick={increment}>+</button>
+				<button onClick={decrement}>-</button>
+				<button onClick={incrementAsync}>Increment Async</button>
+			</div>
+		</Provider>
+	);
+}

demo/zustand.js

@@ -0,0 +1,53 @@
+import { createElement } from 'preact';
+import create from 'zustand';
+
+const useStore = create(set => ({
+	value: 0,
+	text: 'John',
+	setText: text => set(state => ({ ...state, text })),
+	increment: () => set(state => ({ value: state.value + 1 })),
+	decrement: () => set(state => ({ value: state.value - 1 })),
+	incrementAsync: async () => {
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		set(state => ({ value: state.value + 1 }));
+	}
+}));
+
+function Counter({ number }) {
+	const value = useStore(state => state.value);
+	return (
+		<div>
+			Counter #{number}: {value}
+		</div>
+	);
+}
+function Text() {
+	const text = useStore(state => state.text);
+	const { setText } = useStore();
+	function handleInput(e) {
+		setText(e.target.value);
+	}
+	return (
+		<div>
+			Text: {text}
+			<input value={text} onInput={handleInput} />
+		</div>
+	);
+}
+
+export default function ZustandComponent() {
+	const { increment, decrement, incrementAsync } = useStore();
+
+	return (
+		<div>
+			<h1>Zustand</h1>
+			<h1>Counter</h1>
+			<Counter number={1} />
+			<Counter number={2} />
+			<button onClick={increment}>+</button>
+			<button onClick={decrement}>-</button>
+			<button onClick={incrementAsync}>Increment Async</button>
+			<Text />
+		</div>
+	);
+}