Modo Reducer

Se utiliza cuando es mejor agrupar reglas de cambio de estado en acciones que llamar directamente a un setter.

Estado de reducer nombrado

createRxReducerdespacha acciones sin cambiar el estado directamente. Es adecuado para estados con múltiples reglas de cambio como carrito, todo, estado del 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",
);

Usar el helper de tupla de reducer en la clave de tiempo de ejecución.

Si se deben separar los stores de reducer por cada clave de tiempo de ejecución como id de espacio de trabajo, id de proyecto. createRxReducerTupleUsar.

tsx

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