immer

react/demo/src/Ability/index.js

@@ -0,0 +1,29 @@
+import React, { useState, Suspense } from 'react';
+import useImmerState from '../hooks/useImmerState';
+
+const baseState = [
+    {
+        todo: "Learn typescript",
+        done: true
+    },
+    {
+        todo: "Try immer",
+        done: false
+    }
+]
+function Ability() {
+    const [value, setValue] = useImmerState(baseState);
+    const onClick = () => {
+        setValue(draftState => {
+            draftState.push({todo: "Tweet about it"})
+            draftState[1].done = true
+        })
+    }
+    return (
+        <div onClick={onClick}> 
+            {JSON.stringify(value)}
+        </div>
+    )
+}
+
+export default Ability;

react/demo/src/App.js

@@ -10,6 +10,7 @@ const Carousel = lazy(() => import('./Carousel'));
 const Test = lazy(() => import('./Test/index'));
 const ToScroll = lazy(() => import('./ToScroll/index'))
 const Lazy = lazy(() => import('./Lazy'))
+const Ability = lazy(() => import('./Ability'))
 
 function AppRouter() {
   return (
@@ -34,7 +35,8 @@ function AppRouter() {
               <Route path="/carousel" component={Carousel} />
               <Route path="/test" component={Test} />
               <Route path="/scroll" component={ToScroll} />
-              <Route path="/lazy" component={Lazy} />
+              <Route path="/Lazy" component={Lazy} />
+              <Route path="/ability" component={Ability} />
           </Switch>
         </Suspense>
     </Router>

react/demo/src/hooks/useImmerState.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import produce from "immer"
+
+const useImmerState = (initialValue) => {
+    const [value, setValue] = useState(initialValue);
+    const setState = useCallback((callback) => {
+        const nextState = produce(value, draftState => {
+            callback(draftState);
+        })
+        setValue(nextState);
+    }, [value])
+    return [value, setState]
+}
+
+export default useImmerState;