revskill10 · October 25, 2018 18:31 · Oct 25, 2018 · Oct 24, 2018
diff --git a/useMutableReducer.js b/useMutableReducer.js
@@ -1,4 +1,5 @@
 import {useReducer, useCallback} from 'react';
+import {produce} from 'immer';
 
 function useMutableReducer(reducer, initialState, initialAction) {
   const mutableReducer = useCallback(

diff --git a/App.js b/App.js
@@ -0,0 +1,23 @@
+import React from "react";
+import useMutableReducer from "./useMutableReducer";
+
+const reducer = (draft, action, state) => {
+  switch (action) {
+    case "increment":
+      draft.count++;
+      break;
+    case "decrement":
+      draft.count--;
+  }
+};
+
+const App = () => {
+  const [state, dispatch] = useMutableReducer(reducer, { count: 0 });
+  return (
+    <>
+      <h1>{state.count}</h1>
+      <button onClick={() => dispatch("increment")}>+</button>
+      <button onClick={() => dispatch("decrement")}>-</button>
+    </>
+  );
+};
diff --git a/useMutableReducer.js b/useMutableReducer.js
@@ -0,0 +1,13 @@
+import {useReducer, useCallback} from 'react';
+
+function useMutableReducer(reducer, initialState, initialAction) {
+  const mutableReducer = useCallback(
+    (state, action) => {
+      return produce(draft => {
+        return reducer(draft, action, state);
+      });
+    },
+    [reducer]
+  );
+  return useReducer(mutableReducer, initialState, initialAction);
+}
No results found