Reducers

Reducers apply your actions to the state.

Initial State

First, you'll need to create an initial state. Some typing might be required here, some can be infered:

import { mapReducers } from "@react-nano/tsrux";

// Some types, you obviously still need
interface TodoEntry {
  id: number;
  label: string;
  checked: boolean;
}

const initialState = {
  list: [] as TodoEntry[],
  nextId: 0,
};

// Some types you can infer from a variable
export type TodoState = typeof initialState;

Handle Actions

When using mapReducers(), you don't need to define any more types!

• This function is used to create a reducer for multiple actions.
• It receives the initial state and a callback.
  • The callback is used to set up action handlers and returns an array of action handlers.

export const todosReducer = mapReducers(initialState, (handle) => [
  // handle(actionCreator, reducer) helps you define a reducer responsible for one single action.
  // Both state and action know their types without needing to manually specify them!
  handle(addTodo, (state, action) => ({
    ...state,
    list: [...state.list, { id: state.nextId, label: action.payload.label, checked: false }],
    nextId: state.nextId + 1,
  })),
  handle(setTodoChecked, (state, action) => ({
    ...state,
    list: state.list.map((todo) => {
      if (todo.id === action.payload.id) return { ...todo, checked: action.payload.checked };
      return todo;
    }),
  })),
  handle(removeTodo, (state, action) => ({
    ...state,
    // Complains about next line: payload does not have an attribute named "ID"
    list: state.list.filter((todo) => todo.id !== action.payload.ID),
  })),
]);