Create reducer

Import ReducerMap class

import { ReducerMap } from '@qlee/redux-functional';

Create reducers

const dataReducer = new ReducerMap<Record<number, Task>>({})
  .watch(taskActions.add, (state, task: Task) => ({ ...state, [task.id]: task }))
  .watch(taskActions.patch, (state, id: number, task: Partial<Task>) => {
    const originTask = state[id] || {};
    return { ...state, [id]: { ...originTask, ...task } };
  })
  .toReducer();

const listReducer = new ReducerMap<number[]>([])
  .watch(taskActions.add, (state, task: Task) => [...state, task.id])
  .toReducer();

export const reducers = combineReducers({
  data: dataReducer,
  list: listReducer,
});

Typescript can help us check the types

const dataReducer = new ReducerMap<Record<number, Task>>({})
  .watch(taskActions.add, (state, task: number) => ...) // error if you use typescript

if you use javascript and want to handle the action without ReducerMap, you could handle the action with payload property which is the action arguments.