Mode Reducer

Digunakan ketika lebih baik mengumpulkan aturan perubahan status dengan aksi daripada memanggil setter secara langsung.

Status reducer bernama

createRxReducertidak mengubah status secara langsung dan mendispatch aksi. Cocok untuk status dengan banyak aturan perubahan seperti keranjang belanja, todo, dan status editor.

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",
);

Gunakan helper tuple reducer untuk runtime key.

Jika Anda perlu memisahkan reducer store untuk setiap runtime key seperti workspace id, project id. createRxReducerTuplegunakan.

tsx

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