#Comparison

import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
 
type Todo = { id: number; text: string; done: boolean };
 
// State and actions share one type, no structural separation.
type TodoStore = {
  todos: Todo[];
  status: "idle" | "loading" | "failed";
  addTodo: (text: string) => void;
};
 
// Read inside-out: immer, persist, devtools. Order affects what `set` does
// inside each wrapper.
const useStore = create(
  devtools(
    persist(
      // The explicit type annotation is required.
      immer<TodoStore>((set) => ({
        todos: [],
        status: "idle" as const,
        addTodo: (text: string) =>
          set((draft) => {
            draft.todos.push({ id: Date.now(), text, done: false });
          }),
      })),
      { name: "todos-storage" },
    ),
    { name: "TodoStore" },
  ),
);
 
// Subscribing to addTodo runs its selector on every state change, even though
// the action is a stable ref.
function TodoApp() {
  const todos = useStore((s) => s.todos);
  const addTodo = useStore((s) => s.addTodo); // Unnecessary subscription.
}

import { StateCreator, StoreMutatorIdentifier } from "zustand";
 
type Write<T, U> = Omit<T, keyof U> & U;
 
type HistoryApi = {
  history: {
    canUndo(): boolean;
    canRedo(): boolean;
    undo(): boolean;
    redo(): boolean;
  };
};
 
// Module augmentation is required to extend the store's type.
declare module "zustand/vanilla" {
  interface StoreMutators<S, A> {
    "custom/history": Write<S, HistoryApi>;
  }
}
 
type History = <
  T,
  Mps extends [StoreMutatorIdentifier, unknown][] = [],
  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
>(
  fn: StateCreator<T, [...Mps, ["custom/history", never]], Mcs>,
) => StateCreator<T, Mps, [["custom/history", never], ...Mcs]>;
 
type HistoryImpl = <T>(
  fn: StateCreator<T, [], []>,
) => StateCreator<T, [], []>;
 
// Wraps the original state creator and alters the store API.
const historyImpl: HistoryImpl = (fn) => (set, get, api) => {
  // Types can't follow the runtime mutation, so TState is inferred by hand.
  type TState = ReturnType<typeof get>;
 
  const snapshots: TState[] = [];
  let index = 0;
  let isRestoring = false;
 
  // Mutates `api` directly, silently overriding anything already on `history`.
  (api as typeof api & HistoryApi).history = {
    canUndo: () => index > 0,
    canRedo: () => index + 1 < snapshots.length,
    undo(): boolean {
      if (index <= 0) return false;
      isRestoring = true;
      api.setState(snapshots[--index], true);
      isRestoring = false;
      return true;
    },
    redo(): boolean {
      if (index + 1 >= snapshots.length) return false;
      isRestoring = true;
      api.setState(snapshots[++index], true);
      isRestoring = false;
      return true;
    },
  };
 
  const state = fn(set, get, api);
 
  snapshots.push(api.getState());
 
  api.subscribe((current) => {
    if (isRestoring) return;
    snapshots.length = index + 1;
    snapshots.push(current);
    index = snapshots.length - 1;
  });
 
  return state;
};
 
// Double cast required, for the same reason.
export const history = historyImpl as unknown as History;

import {
  configureStore,
  createAsyncThunk,
  createSlice,
} from "@reduxjs/toolkit";
import type { Middleware, PayloadAction } from "@reduxjs/toolkit";
 
type Todo = { id: number; text: string; done: boolean };
type TodoState = { todos: Todo[]; status: "idle" | "loading" | "failed" };
 
// The async action is defined apart from the slice that handles it.
const fetchTodos = createAsyncThunk("todos/fetch", async () => {
  const resp = await fetch("/api/todos");
  return (await resp.json()) as Todo[];
});
 
const todosSlice = createSlice({
  name: "todos",
  initialState: { todos: [], status: "idle" } as TodoState,
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      state.todos.push({ id: Date.now(), text: action.payload, done: false });
    },
  },
  // Async results are handled apart from the sync reducers.
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (s) => {
        s.status = "loading";
      })
      .addCase(fetchTodos.fulfilled, (s, a) => {
        s.todos = a.payload;
        s.status = "idle";
      })
      .addCase(fetchTodos.rejected, (s) => {
        s.status = "failed";
      });
  },
});
 
// Middleware is curried: three layers of arrow functions.
const logger: Middleware = (api) => (next) => (action) => {
  console.log("dispatching", action);
  return next(action);
};
 
const store = configureStore({
  reducer: { todos: todosSlice.reducer },
  middleware: (m) => m().concat(logger),
});
 
// These types must be exported by hand.
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
 
// Actions live on the slice, not the store.
store.dispatch(todosSlice.actions.addTodo("Buy milk"));
store.dispatch(fetchTodos()); // A thunk, not a plain action.

import { configureStore } from "@reduxjs/toolkit";
import type { StoreEnhancer } from "@reduxjs/toolkit";
 
type HistoryExt = {
  history: {
    canUndo(): boolean;
    canRedo(): boolean;
    undo(): boolean;
    redo(): boolean;
  };
};
 
// StoreEnhancer<Ext> does not thread state: TState is inferred from the
// reducer by hand, and actions need casts to satisfy Redux's Action.
function makeHistory(): StoreEnhancer<HistoryExt> {
  return (createStoreApi) => (reducer, preloadedState) => {
    type TState = ReturnType<typeof reducer>;
    type RestoreAction = { type: "@@HISTORY/RESTORE"; payload: TState };
 
    const snapshots: TState[] = [];
    let index = 0;
    let isRestoring = false;
 
    // Wraps the reducer to intercept a private RESTORE action.
    const wrapped: typeof reducer = (state, action) =>
      (action as unknown as RestoreAction).type === "@@HISTORY/RESTORE"
        ? (action as unknown as RestoreAction).payload
        : reducer(state, action);
 
    const store = createStoreApi(wrapped, preloadedState);
    snapshots.push(store.getState());
 
    store.subscribe(() => {
      if (isRestoring) return;
      snapshots.length = index + 1;
      snapshots.push(store.getState());
      index = snapshots.length - 1;
    });
 
    function restore(saved: TState): void {
      isRestoring = true;
      store.dispatch(
        { type: "@@HISTORY/RESTORE", payload: saved } as RestoreAction as never,
      );
      isRestoring = false;
    }
 
    return {
      ...store,
      history: {
        canUndo: () => index > 0,
        canRedo: () => index + 1 < snapshots.length,
        undo(): boolean {
          if (index <= 0) return false;
          restore(snapshots[--index]);
          return true;
        },
        redo(): boolean {
          if (index + 1 >= snapshots.length) return false;
          restore(snapshots[++index]);
          return true;
        },
      },
    };
  };
}
 
const store = configureStore({
  reducer: rootReducer,
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers().concat(makeHistory()),
});
 
store.history.undo();

import { atom, useAtomValue, useSetAtom } from "jotai";
 
type Todo = { id: number; text: string; done: boolean };
 
// Each field is its own atom.
const todosAtom = atom<Todo[]>([]);
const statusAtom = atom<"idle" | "loading" | "failed">("idle");
 
// App logic must be wrapped in an atom.
const addTodoAtom = atom(null, (get, set, text: string) => {
  set(todosAtom, (prev) => [...prev, { id: Date.now(), text, done: false }]);
});
 
const fetchTodosAtom = atom(null, async (get, set) => {
  set(statusAtom, "loading");
  try {
    const todos = (await fetch("/api/todos").then((r) => r.json())) as Todo[];
    set(todosAtom, todos);
    set(statusAtom, "idle");
  } catch {
    set(statusAtom, "failed");
  }
});
 
function TodoApp() {
  const todos = useAtomValue(todosAtom);
  const status = useAtomValue(statusAtom);
 
  // Hooks are required to reach the logic.
  const addTodo = useSetAtom(addTodoAtom);
  const fetchTodos = useSetAtom(fetchTodosAtom);
 
  // ...
}

import { makeAutoObservable, runInAction } from "mobx";
import { observer } from "mobx-react-lite";
 
type Todo = { id: number; text: string; done: boolean };
 
class TodoStore {
  todos: Todo[] = [];
  status: "idle" | "loading" | "failed" = "idle";
 
  constructor() {
    // Instruments every field and method, with no list of what is reactive.
    makeAutoObservable(this);
  }
 
  addTodo(text: string) {
    this.todos.push({ id: Date.now(), text, done: false });
  }
 
  async fetchTodos() {
    this.status = "loading";
    try {
      const resp = await fetch("/api/todos");
      const todos = (await resp.json()) as Todo[];
      // Mutations after an await need runInAction. Forgetting it fails
      // silently: no error, stale UI.
      runInAction(() => {
        this.todos = todos;
        this.status = "idle";
      });
    } catch {
      runInAction(() => {
        this.status = "failed";
      });
    }
  }
}
 
export const todoStore = new TodoStore();
 
// Every component reading observable state needs observer(), or it silently
// goes stale.
const TodoApp = observer(() => {
  const { todos, status } = todoStore;
  return <button onClick={() => todoStore.addTodo("Buy milk")}>Add</button>;
});