Refactored sandbox reducer to createReducer APi

codesandbox/src/features/todos/reducer.ts

@@ -1,50 +1,29 @@
-import { RootAction } from 'MyTypes';
 import { Todo } from 'MyModels';
 import { combineReducers } from 'redux';
-import { getType } from 'typesafe-actions';
+import { createReducer } from 'typesafe-actions';
 
-import * as actions from './actions';
+import { loadTodosAsync, addTodo, removeTodo } from './actions';
 
-export type SandboxState = Readonly<{
-  isLoadingTodos: boolean;
-  todos: Todo[];
-}>;
+export const isLoadingTodos = createReducer(false as boolean)
+  .addHandler([loadTodosAsync.request], (state, action) => true)
+  .addHandler(
+    [loadTodosAsync.success, loadTodosAsync.failure],
+    (state, action) => false
+  );
 
-export default combineReducers<SandboxState, RootAction>({
-  isLoadingTodos: (state = false, action) => {
-    switch (action.type) {
-      case getType(actions.loadTodosAsync.request):
-        return true;
-
-      case getType(actions.loadTodosAsync.success):
-      case getType(actions.loadTodosAsync.failure):
-        return false;
-
-      default:
-        return state;
-    }
-  },
-  todos: (
-    state = [
-      {
-        id: '0',
-        title: 'You can add new todos using the form or load saved snapshot...',
-      },
-    ],
-    action
-  ) => {
-    switch (action.type) {
-      case getType(actions.addTodo):
-        return [...state, action.payload];
-
-      case getType(actions.removeTodo):
-        return state.filter(i => i.id !== action.payload);
-
-      case getType(actions.loadTodosAsync.success):
-        return action.payload;
-
-      default:
-        return state;
-    }
+export const todos = createReducer([
+  {
+    id: '0',
+    title: 'You can add new todos using the form or load saved snapshot...',
   },
+] as readonly Todo[])
+  .addHandler(loadTodosAsync.success, (state, action) => action.payload)
+  .addHandler(addTodo, (state, action) => [...state, action.payload])
+  .addHandler(removeTodo, (state, action) =>
+    state.filter(i => i.id !== action.payload)
+  );
+
+export default combineReducers({
+  isLoadingTodos,
+  todos,
 });

codesandbox/src/features/todos/selectors.ts

@@ -1,5 +1,5 @@
 // import { createSelector } from 'reselect';
 
-import { SandboxState } from './reducer';
+import { TodosState } from './reducer';
 
-export const getTodos = (state: SandboxState) => state.todos;
+export const getTodos = (state: TodosState) => state.todos;

codesandbox/src/store/types.d.ts

@@ -5,3 +5,7 @@ declare module 'MyTypes' {
   export type RootAction = ActionType<typeof import('./root-action').default>;
   export type RootState = StateType<typeof import('./root-reducer').default>;
 }
+
+declare module 'typesafe-actions' {
+  export type RootAction = ActionType<typeof import('./root-action').default>;
+}