Fixed useReducer

Author: mattpocock

src/03-hooks/21-use-reducer.problem.ts

@@ -4,9 +4,9 @@ import { Equal, Expect } from "../helpers/type-utils";
 const reducer = (state: unknown, action: unknown) => {
   switch (action.type) {
     case "add":
-      return { count: state.count + action.amount };
+      return { count: state.count + action.add };
     case "subtract":
-      return { count: state.count - action.amount };
+      return { count: state.count - action.subtract };
     default:
       throw new Error();
   }
@@ -16,13 +16,13 @@ const [state, dispatch] = useReducer(reducer, { count: 0 });
 
 type tests = [Expect<Equal<typeof state.count, number>>];
 
-dispatch({ type: "add", amount: 1 });
+dispatch({ type: "add", add: 1 });
 
 // @ts-expect-error
-dispatch({ type: "SUBTRACT" });
+dispatch({ type: "SUBTRACT", subtract: 1 });
 
 // @ts-expect-error
 dispatch({ type: "add" });
 
 // @ts-expect-error
-dispatch({ type: "subtract", amount: "123" });
+dispatch({ type: "subtract", subtract: "123" });

src/03-hooks/21-use-reducer.solution.1.ts

@@ -5,16 +5,21 @@ const reducer = (
   state: {
     count: number;
   },
-  action: {
-    type: string;
-    amount: number;
-  }
+  action:
+    | {
+        type: "add";
+        add: number;
+      }
+    | {
+        type: "subtract";
+        subtract: number;
+      }
 ) => {
   switch (action.type) {
     case "add":
-      return { count: state.count + action.amount };
+      return { count: state.count + action.add };
     case "subtract":
-      return { count: state.count - action.amount };
+      return { count: state.count - action.subtract };
     default:
       throw new Error();
   }
@@ -24,13 +29,13 @@ const [state, dispatch] = useReducer(reducer, { count: 0 });
 
 type tests = [Expect<Equal<typeof state.count, number>>];
 
-dispatch({ type: "add", amount: 1 });
+dispatch({ type: "add", add: 1 });
 
 // @ts-expect-error
-dispatch({ type: "SUBTRACT" });
+dispatch({ type: "SUBTRACT", subtract: 1 });
 
 // @ts-expect-error
 dispatch({ type: "add" });
 
 // @ts-expect-error
-dispatch({ type: "subtract", amount: "123" });
+dispatch({ type: "subtract", subtract: "123" });

src/03-hooks/21-use-reducer.solution.2.ts

@@ -1,18 +1,26 @@
 import { useReducer } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-type ReducerAction =
-  | { type: "add"; amount: number }
-  | { type: "subtract"; amount: number };
-
-type ReducerState = { count: number };
+type ReducerState = {
+  count: number;
+};
 
-const reducer = (state: ReducerState, action: ReducerAction): ReducerState => {
+type ReducerAction =
+  | {
+      type: "add";
+      add: number;
+    }
+  | {
+      type: "subtract";
+      subtract: number;
+    };
+
+const reducer = (state: ReducerState, action: ReducerAction) => {
   switch (action.type) {
     case "add":
-      return { count: state.count + action.amount };
+      return { count: state.count + action.add };
     case "subtract":
-      return { count: state.count - action.amount };
+      return { count: state.count - action.subtract };
     default:
       throw new Error();
   }
@@ -22,13 +30,13 @@ const [state, dispatch] = useReducer(reducer, { count: 0 });
 
 type tests = [Expect<Equal<typeof state.count, number>>];
 
-dispatch({ type: "add", amount: 1 });
+dispatch({ type: "add", add: 1 });
 
 // @ts-expect-error
-dispatch({ type: "SUBTRACT" });
+dispatch({ type: "SUBTRACT", subtract: 1 });
 
 // @ts-expect-error
 dispatch({ type: "add" });
 
 // @ts-expect-error
-dispatch({ type: "subtract", amount: "123" });
+dispatch({ type: "subtract", subtract: "123" });

src/03-hooks/21-use-reducer.solution.3.ts

@@ -1,20 +1,26 @@
 import { Reducer, useReducer } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-type ReducerAction =
-  | { type: "add"; amount: number }
-  | { type: "subtract"; amount: number };
-
-type ReducerState = { count: number };
-
-type MyReducer = Reducer<ReducerState, ReducerAction>;
+type ReducerState = {
+  count: number;
+};
 
-const reducer: MyReducer = (state, action) => {
+type ReducerAction =
+  | {
+      type: "add";
+      add: number;
+    }
+  | {
+      type: "subtract";
+      subtract: number;
+    };
+
+const reducer: Reducer<ReducerState, ReducerAction> = (state, action) => {
   switch (action.type) {
     case "add":
-      return { count: state.count + action.amount };
+      return { count: state.count + action.add };
     case "subtract":
-      return { count: state.count - action.amount };
+      return { count: state.count - action.subtract };
     default:
       throw new Error();
   }
@@ -24,13 +30,13 @@ const [state, dispatch] = useReducer(reducer, { count: 0 });
 
 type tests = [Expect<Equal<typeof state.count, number>>];
 
-dispatch({ type: "add", amount: 1 });
+dispatch({ type: "add", add: 1 });
 
 // @ts-expect-error
-dispatch({ type: "SUBTRACT" });
+dispatch({ type: "SUBTRACT", subtract: 1 });
 
 // @ts-expect-error
 dispatch({ type: "add" });
 
 // @ts-expect-error
-dispatch({ type: "subtract", amount: "123" });
+dispatch({ type: "subtract", subtract: "123" });