Mode Reducer

Utilisé lorsque regrouper les règles de changement d'état par action est préférable à l'appel direct du setter.

État du reducer nommé

createRxReducerdispatch une action sans changer directement l'état. Convient aux états avec plusieurs règles de changement comme le panier, todo, état de l'éditeur.

tsx

type TodoAction =
  | { type: "add"; text: string }
  | { type: "toggle"; id: number }
  | { type: "clearDone" };

function todoReducer(state: TodoState, action: TodoAction): TodoState {
  switch (action.type) {
    case "add":
      return {
        items: [...state.items, { id: state.nextId, text: action.text, done: false }],
        nextId: state.nextId + 1,
      };
    case "toggle":
      return {
        ...state,
        items: state.items.map((item) =>
          item.id === action.id ? { ...item, done: !item.done } : item,
        ),
      };
    default:
      return state;
  }
}

const { dispatchTodo, useTodo } = createRxReducer(
  initialTodoState,
  todoReducer,
  "todo",
);

Utiliser l'assistant de tuple reducer pour la clé d'exécution.

Si vous devez séparer le store reducer par clé d'exécution comme l'id de l'espace de travail, l'id de projet. createRxReducerTupleUtilisez.

tsx

export function useWorkspaceFilterState(workspaceId: string) {
  return createRxReducerTuple(
    initialFilterState,
    filterReducer,
    `workspace-filter:${workspaceId}`,
    { storage: "auto" },
  );
}