diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index c5bc1ed..613752e 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -14,6 +14,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
-    'no-console': ['error', { allow: ['warn', 'error'] }],
+    'no-console': ['error', { allow: ['info', 'warn', 'error'] }],
   },
 }
diff --git a/README.md b/README.md
index d9d356c..5f8a388 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # Overview
 
 An elegant state management solution for React.
+The philosophy of this project is to keep the core simple and scalable by exposing low-level accessibility and middleware composition, not by adding options.
+All the non-core functions are just examples of how you can compose functions to achieve common features.
 
 ## Features
 
@@ -8,7 +10,8 @@ An elegant state management solution for React.
 - **Type safe**: The state is type safe and the return value is intuitive.
 - **Global**: The state is global, you can access it anywhere.
 - **Scalable**: Naturally scale large state into multiple modules and files without performance degradation.
-- **Tiny**: Less than [0.3KB](https://bundlephobia.com/package/create-global-state).
+- **Middlewares**: Simple and type-safe middleware composition interface.
+- **Tiny**: About [0.3KB](https://bundlephobia.com/package/create-global-state) Minified + Gzipped.
 
 ## Documentation
 
@@ -46,3 +49,4 @@ Its implementation is not type safe and the return value is not intuitive. It's
 
 The typescript support is not good enough, the API is not intuitive. `create-global-state` is more like `useState` which aligns with the react API style. Check the [comparison](https://github.com/ysmood/create-global-state/issues/1). Zustand [Slices Pattern](https://zustand.docs.pmnd.rs/guides/slices-pattern) can cause naming conflict issues.
 `create-global-state` can naturally scale states by modules and files.
+The setter of zustand must be called within a react component, while the setter of `create-global-state` can be called anywhere.
diff --git a/cspell.json b/cspell.json
new file mode 100644
index 0000000..b958163
--- /dev/null
+++ b/cspell.json
@@ -0,0 +1,13 @@
+{
+  "words": [
+    "gettify",
+    "immer",
+    "immerify",
+    "subscribify",
+    "todomvc",
+    "todos",
+    "tsbuildinfo",
+    "wouter",
+    "zustand"
+  ]
+}
diff --git a/examples/CounterPersistent.tsx b/examples/CounterPersistent.tsx
index c591094..946258a 100644
--- a/examples/CounterPersistent.tsx
+++ b/examples/CounterPersistent.tsx
@@ -1,4 +1,4 @@
-import create from "create-global-state/lib/persistent";
+import create, { saveHistory } from "create-global-state/lib/persistent";
 import { useEffect } from "react";
 import { useHashLocation } from "wouter/use-hash-location";
 
@@ -22,7 +22,11 @@ export default function CounterPersistent() {
 }
 
 function Button() {
-  return <button onClick={() => setCount((c) => c + 1, true)}>Increase</button>;
+  return (
+    <button onClick={() => setCount((c) => c + 1, { [saveHistory]: true })}>
+      Increase
+    </button>
+  );
 }
 
 function Display() {
diff --git a/examples/MonolithStore/store/index.ts b/examples/MonolithStore/store/index.ts
index 6568fb4..ffce86f 100644
--- a/examples/MonolithStore/store/index.ts
+++ b/examples/MonolithStore/store/index.ts
@@ -1,6 +1,6 @@
 // Here we use Immer to update the store immutably, Immer is optional,
 // you can use vanilla js or other libs to update the store.
-import create from "create-global-state/lib/immer";
+import { create } from "create-global-state/lib/immer";
 
 // Define the monolith store for the entire web app.
 // It contains a list of counters and a title string.
diff --git a/examples/TodoApp/Actions.tsx b/examples/TodoApp/Actions.tsx
index 4f3262e..478bbc7 100644
--- a/examples/TodoApp/Actions.tsx
+++ b/examples/TodoApp/Actions.tsx
@@ -1,6 +1,6 @@
 import Filter from "./Filter";
-import { addTodo, clearCompleted } from "./todos/actions";
-import { useZeroDone } from "./todos";
+import { addTodo, clearCompleted } from "./store/actions";
+import { useZeroDone } from "./store/todos";
 import ToggleAll from "./ToggleAll";
 
 export default function Actions() {
diff --git a/examples/TodoApp/Filter.tsx b/examples/TodoApp/Filter.tsx
index a80ad3c..516a566 100644
--- a/examples/TodoApp/Filter.tsx
+++ b/examples/TodoApp/Filter.tsx
@@ -1,7 +1,11 @@
-import { filters, setFilter } from "./todos/filter";
+import { useEffect } from "react";
+import { setFilter } from "./store/filter";
+import { filters } from "./store/filter/types";
 
 // The component to filter the todos.
 export default function Filter() {
+  useEffect(() => {});
+
   return (
     <select onChange={(e) => setFilter(e.target.value)}>
       {filters.map((f) => (
diff --git a/examples/TodoApp/README.md b/examples/TodoApp/README.md
new file mode 100644
index 0000000..6b4a940
--- /dev/null
+++ b/examples/TodoApp/README.md
@@ -0,0 +1,19 @@
+# Overview
+
+An example of how to use `create-global-state` to build a scalable todo app.
+The example is intentionally split the app into tiny modules to show how to scale the app.
+So that when you update part of the state, only the minimal components will re-render, not the whole todo list or app.
+
+## Compare the rerendering with TodoMVC
+
+We use [react chrome extension](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+to [visualize the rerender](https://github.com/user-attachments/assets/ef42abfc-814b-4eff-b31c-8ca867d87128)
+of each implementation.
+
+### create-global-state
+
+![create-global-state](https://github.com/user-attachments/assets/dc405ff6-fe6e-40f5-8703-e0a2e1aa7b8e)
+
+### [todomvc.com](https://todomvc.com/examples/react/dist/)
+
+![todomvc](https://github.com/user-attachments/assets/9e175ab1-0a16-4819-a079-c3ffb4238695)
diff --git a/examples/TodoApp/Title.tsx b/examples/TodoApp/Title.tsx
index 6e754a4..681b3db 100644
--- a/examples/TodoApp/Title.tsx
+++ b/examples/TodoApp/Title.tsx
@@ -1,4 +1,4 @@
-import { useLeftCount } from "./todos";
+import { useLeftCount } from "./store/todos";
 
 export default function Title() {
   return <h3>Todo App ({useLeftCount()} todos left)</h3>;
diff --git a/examples/TodoApp/TodoItem.tsx b/examples/TodoApp/TodoItem.tsx
index 452fedd..c49b2a9 100644
--- a/examples/TodoApp/TodoItem.tsx
+++ b/examples/TodoApp/TodoItem.tsx
@@ -1,20 +1,19 @@
-import { delTodo, toggleTodo, updateTodo, useTodo } from "./todos";
+import {
+  delTodo,
+  toggleTodo,
+  updateTodo,
+  useTodo,
+  useTodoDone,
+} from "./store/todos";
 
-// The component to display a todo.
-export default function TodoItem({ id }: { id: number }) {
-  const { done, text } = useTodo(id);
+type AttrID = { id: number };
 
+// The component to display a todo.
+export default function TodoItem({ id }: AttrID) {
   return (
     <div className="flex gap-1 my-1">
-      <input type="checkbox" checked={done} onChange={() => toggleTodo(id)} />
-
-      <input
-        placeholder="Input text here"
-        value={text}
-        onChange={(e) => updateTodo(id, e.target.value)}
-        disabled={done}
-        autoFocus
-      />
+      <Done id={id} />
+      <Input id={id} />
 
       <button onClick={() => delTodo(id)} title="Delete current todo">
         ✕
@@ -22,3 +21,26 @@ export default function TodoItem({ id }: { id: number }) {
     </div>
   );
 }
+
+function Done({ id }: AttrID) {
+  return (
+    <input
+      type="checkbox"
+      checked={useTodoDone(id)}
+      onChange={() => toggleTodo(id)}
+    />
+  );
+}
+
+function Input({ id }: AttrID) {
+  const { done, text } = useTodo(id);
+  return (
+    <input
+      placeholder="Input text here"
+      value={text}
+      onChange={(e) => updateTodo(id, e.target.value)}
+      disabled={done}
+      autoFocus
+    />
+  );
+}
diff --git a/examples/TodoApp/TodoList.tsx b/examples/TodoApp/TodoList.tsx
index e3a2369..e0d0177 100644
--- a/examples/TodoApp/TodoList.tsx
+++ b/examples/TodoApp/TodoList.tsx
@@ -1,4 +1,4 @@
-import { useTodoIds } from "./todos";
+import { useTodoIds } from "./store/todos";
 import TodoItem from "./TodoItem";
 
 // The component to display all filtered todos.
diff --git a/examples/TodoApp/ToggleAll.tsx b/examples/TodoApp/ToggleAll.tsx
index 55c0309..5dae36b 100644
--- a/examples/TodoApp/ToggleAll.tsx
+++ b/examples/TodoApp/ToggleAll.tsx
@@ -1,5 +1,5 @@
-import { toggleAll, useToggleAll } from "./todos/actions";
-import { useZeroCount } from "./todos";
+import { toggleAll, useToggleAll } from "./store/actions";
+import { useZeroCount } from "./store/todos";
 
 // The component to toggle all todos.
 export default function ToggleAll() {
diff --git a/examples/TodoApp/todos/actions.ts b/examples/TodoApp/store/actions.ts
similarity index 58%
rename from examples/TodoApp/todos/actions.ts
rename to examples/TodoApp/store/actions.ts
index 5bb6c97..fd8d5af 100644
--- a/examples/TodoApp/todos/actions.ts
+++ b/examples/TodoApp/store/actions.ts
@@ -1,23 +1,25 @@
-import { getFilter, useFilter } from "./filter";
-import { filterTodos, initTodo, setTodos, useTodos } from ".";
+import { setStore, useStore } from ".";
+import { initTodo } from "./todos/types";
+import { filterTodos } from "./todos";
 
 // Add a new empty todo to the list.
 export function addTodo() {
-  setTodos((todos) => {
-    todos.unshift({ ...initTodo, id: Date.now() });
+  setStore((s) => {
+    s.todos.unshift({ ...initTodo, id: Date.now() });
   });
 }
 
 // Clear all completed todos.
 export function clearCompleted() {
-  setTodos((todos) => todos.filter(({ done }) => !done));
+  setStore((s) => {
+    s.todos = s.todos.filter(({ done }) => !done);
+  });
 }
 
 // Get the toggleAll state.
 export function useToggleAll() {
-  const filter = useFilter();
-  return useTodos((todos) => {
-    todos = filterTodos(todos, filter);
+  return useStore((s) => {
+    const todos = filterTodos(s, s.filter);
     if (todos.length === 0) {
       return false;
     }
@@ -27,8 +29,8 @@ export function useToggleAll() {
 
 // Toggle all the current filtered todos.
 export function toggleAll() {
-  setTodos((todos) => {
-    todos = filterTodos(todos, getFilter());
+  setStore((s) => {
+    const todos = filterTodos(s, s.filter);
     if (todos.every(({ done }) => done)) {
       todos.forEach((todo) => {
         todo.done = false;
diff --git a/examples/TodoApp/store/filter/index.ts b/examples/TodoApp/store/filter/index.ts
new file mode 100644
index 0000000..62b6dc9
--- /dev/null
+++ b/examples/TodoApp/store/filter/index.ts
@@ -0,0 +1,12 @@
+import { setStore, useStore } from "..";
+import { Filter } from "./types";
+
+export const useFilter = () => {
+  return useStore((state) => state.filter);
+};
+
+export const setFilter = (filter: string) => {
+  setStore((s) => {
+    s.filter = filter as Filter;
+  });
+};
diff --git a/examples/TodoApp/store/filter/types.ts b/examples/TodoApp/store/filter/types.ts
new file mode 100644
index 0000000..f05be64
--- /dev/null
+++ b/examples/TodoApp/store/filter/types.ts
@@ -0,0 +1,5 @@
+export const initFilter = "All";
+
+export const filters = [initFilter, "Active", "Completed"] as const;
+
+export type Filter = (typeof filters)[number];
diff --git a/examples/TodoApp/store/index.ts b/examples/TodoApp/store/index.ts
new file mode 100644
index 0000000..fd06671
--- /dev/null
+++ b/examples/TodoApp/store/index.ts
@@ -0,0 +1,19 @@
+import create from "create-global-state";
+import immer from "create-global-state/lib/immer";
+import { Filter, initFilter } from "./filter/types";
+import { initTodo } from "./todos/types";
+import { compose } from "create-global-state/lib/utils";
+import logger from "./logger";
+
+export const initStore = {
+  todos: [initTodo],
+  filter: initFilter as Filter,
+};
+
+export type Store = typeof initStore;
+
+const [useStore, baseSetStore] = create(initStore);
+
+const setStore = compose(baseSetStore, immer, logger);
+
+export { useStore, setStore };
diff --git a/examples/TodoApp/store/logger.ts b/examples/TodoApp/store/logger.ts
new file mode 100644
index 0000000..cb76c16
--- /dev/null
+++ b/examples/TodoApp/store/logger.ts
@@ -0,0 +1,15 @@
+import { producer } from "create-global-state";
+import { SetStoreX } from "create-global-state/lib/utils";
+
+// Create a custom middleware to log all the state changes.
+export default function logger<S>(next: SetStoreX<S>): SetStoreX<S> {
+  return (ns, opts) => {
+    next((from) => {
+      const to = producer(ns)(from);
+
+      console.info("Change state", { from, to });
+
+      return to;
+    }, opts);
+  };
+}
diff --git a/examples/TodoApp/store/todos/index.ts b/examples/TodoApp/store/todos/index.ts
new file mode 100644
index 0000000..b99a35a
--- /dev/null
+++ b/examples/TodoApp/store/todos/index.ts
@@ -0,0 +1,80 @@
+import { setStore, Store, useStore } from "..";
+import { numbersEqual } from "./utils";
+import { Filter } from "../filter/types";
+import { useEqual } from "create-global-state/lib/utils";
+
+// Get a todo by id.
+export function useTodo(id: number) {
+  return useStore((s) => findTodo(s, id));
+}
+
+export function useTodoDone(id: number) {
+  return useStore((s) => findTodo(s, id).done);
+}
+
+// Get a new id list only when the ids of the todos change.
+export function useTodoIds() {
+  return useStore(
+    useEqual((s) => {
+      return filterTodos(s, s.filter).map(({ id }) => id);
+    }, numbersEqual)
+  );
+}
+
+export function useZeroCount() {
+  return useStore((s) => {
+    return filterTodos(s, s.filter).map(({ id }) => id).length === 0;
+  });
+}
+
+// Get the count of the left todos.
+export function useLeftCount() {
+  return useStore((s) => s.todos.filter(({ done }) => !done).length);
+}
+
+export function useZeroDone() {
+  return useStore((s) => !s.todos.some(({ done }) => done));
+}
+
+// Update the text of a todo by id.
+export function updateTodo(id: number, text: string) {
+  setStore((s) => {
+    findTodo(s, id).text = text;
+  });
+}
+
+// Toggle the done state of a todo by id.
+export function toggleTodo(id: number) {
+  setStore((s) => {
+    const todo = findTodo(s, id);
+    if (todo) {
+      todo.done = !todo.done;
+    }
+  });
+}
+
+// Delete a todo by id.
+export function delTodo(id: number) {
+  setStore((s) => {
+    s.todos = s.todos.filter((todo) => todo.id !== id);
+  });
+}
+
+// Find a todo by id.
+function findTodo(s: Store, id: number) {
+  return s.todos.find((todo) => todo.id === id)!;
+}
+
+// Filter the todos by the current status.
+export function filterTodos(s: Store, filter: Filter) {
+  return s.todos.filter(({ done }) => {
+    switch (filter) {
+      case "All":
+        return true;
+      case "Active":
+        return !done;
+      case "Completed":
+        return done;
+    }
+  });
+}
diff --git a/examples/TodoApp/store/todos/types.ts b/examples/TodoApp/store/todos/types.ts
new file mode 100644
index 0000000..63b1e5e
--- /dev/null
+++ b/examples/TodoApp/store/todos/types.ts
@@ -0,0 +1,7 @@
+export const initTodo = {
+  id: Date.now(),
+  text: "",
+  done: false,
+};
+
+export type Todos = (typeof initTodo)[];
diff --git a/examples/utils.ts b/examples/TodoApp/store/todos/utils.ts
similarity index 100%
rename from examples/utils.ts
rename to examples/TodoApp/store/todos/utils.ts
diff --git a/examples/TodoApp/todos/filter.ts b/examples/TodoApp/todos/filter.ts
deleted file mode 100644
index e0d022d..0000000
--- a/examples/TodoApp/todos/filter.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import create from "create-global-state";
-
-const initFilter = "All";
-
-export const filters = [initFilter, "Active", "Completed"] as const;
-
-export type Filter = (typeof filters)[number];
-
-export const [useFilter, setFilterBase, getFilter] = create<Filter>(initFilter);
-
-export const setFilter = (filter: string) => {
-  setFilterBase(filter as Filter);
-};
diff --git a/examples/TodoApp/todos/index.ts b/examples/TodoApp/todos/index.ts
deleted file mode 100644
index 3622122..0000000
--- a/examples/TodoApp/todos/index.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import create from "create-global-state/lib/immer";
-import { useEqual } from "create-global-state";
-import { type Filter, useFilter } from "./filter";
-import { numbersEqual } from "../../utils";
-
-export const initTodo = {
-  id: Date.now(),
-  text: "",
-  done: false,
-};
-
-export const [useTodos, setTodos] = create([initTodo]);
-
-type Todos = (typeof initTodo)[];
-
-// Get a todo by id.
-export function useTodo(id: number) {
-  return useTodos((s) => findTodo(s, id));
-}
-
-// Get a new id list only when the ids of the todos change.
-export function useTodoIds() {
-  const filter = useFilter();
-  return useTodos(
-    useEqual((todos) => {
-      return filterTodos(todos, filter).map(({ id }) => id);
-    }, numbersEqual)
-  );
-}
-
-export function useZeroCount() {
-  const filter = useFilter();
-  return useTodos((todos) => {
-    return filterTodos(todos, filter).map(({ id }) => id).length === 0;
-  });
-}
-
-// Get the count of the left todos.
-export function useLeftCount() {
-  return useTodos((todos) => todos.filter(({ done }) => !done).length);
-}
-
-export function useZeroDone() {
-  return useTodos((todos) => !todos.some(({ done }) => done));
-}
-
-// Update the text of a todo by id.
-export function updateTodo(id: number, text: string) {
-  setTodos((todos) => {
-    findTodo(todos, id).text = text;
-  });
-}
-
-// Toggle the done state of a todo by id.
-export function toggleTodo(id: number) {
-  setTodos((todos) => {
-    const todo = findTodo(todos, id);
-    if (todo) {
-      todo.done = !todo.done;
-    }
-  });
-}
-
-// Delete a todo by id.
-export function delTodo(id: number) {
-  setTodos((todos) => todos.filter((todo) => todo.id !== id));
-}
-
-// Find a todo by id.
-function findTodo(todos: Todos, id: number) {
-  return todos.find((todo) => todo.id === id)!;
-}
-
-// Filter the todos by the current status.
-export function filterTodos(todos: Todos, filter: Filter) {
-  return todos.filter(({ done }) => {
-    switch (filter) {
-      case "All":
-        return true;
-      case "Active":
-        return !done;
-      case "Completed":
-        return done;
-    }
-  });
-}
diff --git a/examples/app.tsx b/examples/app.tsx
new file mode 100644
index 0000000..6a2beb7
--- /dev/null
+++ b/examples/app.tsx
@@ -0,0 +1,48 @@
+import "./index.css";
+import { Link, Switch, Router, Route } from "wouter";
+import { lazy, Suspense } from "react";
+
+const examples = ["Counter", "CounterPersistent", "MonolithStore", "TodoApp"];
+
+export default function App() {
+  return (
+    <>
+      <Navbar />
+
+      <Switch>
+        <ExampleRoute path="/" name={examples[0]} />
+        <Router base="/examples">
+          {examples.map((n) => (
+            <ExampleRoute key={n} name={n} />
+          ))}
+        </Router>
+      </Switch>
+    </>
+  );
+}
+
+function Navbar() {
+  return (
+    <>
+      {examples.map((name) => {
+        return (
+          <Link href={`/examples/${name}`} key={name} className={"mx-1"}>
+            {name}
+          </Link>
+        );
+      })}
+    </>
+  );
+}
+
+function ExampleRoute({ name, path }: { name: string; path?: string }) {
+  path = path || `/${name}`;
+  const Example = lazy(() => import(/* @vite-ignore */ `./${name}`));
+  return (
+    <Route path={path}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Example />
+      </Suspense>
+    </Route>
+  );
+}
diff --git a/examples/index.tsx b/examples/index.tsx
index 4f8cefb..79408f0 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -1,39 +1,9 @@
-import "./index.css";
 import ReactDOM from "react-dom/client";
-import { Link, Switch, Router, Route } from "wouter";
-import { lazy, StrictMode, Suspense } from "react";
-
-const examples = ["Counter", "CounterPersistent", "MonolithStore", "TodoApp"];
+import { StrictMode } from "react";
+import App from "./app";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    {examples.map((name) => {
-      return (
-        <Link href={`/examples/${name}`} key={name} className={"mx-1"}>
-          {name}
-        </Link>
-      );
-    })}
-
-    <Switch>
-      <ExampleRoute path="/" name={examples[0]} />
-      <Router base="/examples">
-        {examples.map((n) => (
-          <ExampleRoute key={n} name={n} />
-        ))}
-      </Router>
-    </Switch>
+    <App />
   </StrictMode>
 );
-
-export function ExampleRoute({ name, path }: { name: string; path?: string }) {
-  path = path || `/${name}`;
-  const Example = lazy(() => import(/* @vite-ignore */ `./${name}`));
-  return (
-    <Route path={path}>
-      <Suspense fallback={<div>Loading...</div>}>
-        <Example />
-      </Suspense>
-    </Route>
-  );
-}
diff --git a/package.json b/package.json
index 892e89e..28d63a2 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.4.1",
   "type": "module",
   "scripts": {
-    "start": "vite --open",
+    "start": "npm run build && vite --open",
     "test": "npm run build && vitest run --coverage && playwright test",
     "build": "tsc -b --clean && tsc -b",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -14,7 +14,8 @@
   "exports": {
     ".": "./lib/index.js",
     "./lib/immer": "./lib/immer.js",
-    "./lib/persistent": "./lib/persistent.js"
+    "./lib/persistent": "./lib/persistent.js",
+    "./lib/utils": "./lib/utils.js"
   },
   "files": [
     "./lib"
diff --git a/src/immer.test.tsx b/src/immer.test.tsx
index 52f4bc3..aeafceb 100644
--- a/src/immer.test.tsx
+++ b/src/immer.test.tsx
@@ -1,17 +1,27 @@
 import { it, expect } from "vitest";
 import { userEvent } from "@vitest/browser/context";
 import { render, screen } from "@testing-library/react";
-import createImmer from "./immer";
+import { create } from "./immer";
 
 it("immer", async () => {
-  const [useVal, setVal] = createImmer(false);
+  const [useVal, setVal] = create({ val: false });
 
   function A() {
-    return <button onClick={() => setVal(() => true)}>Click</button>;
+    return (
+      <button
+        onClick={() =>
+          setVal((s) => {
+            s.val = true;
+          })
+        }
+      >
+        Click
+      </button>
+    );
   }
 
   function B() {
-    const val = useVal();
+    const { val } = useVal();
     return <div>{val ? "OK" : ""}</div>;
   }
 
@@ -28,7 +38,7 @@ it("immer", async () => {
 });
 
 it("immer replace", async () => {
-  const [useVal, setVal] = createImmer(false);
+  const [useVal, setVal] = create(false);
 
   function A() {
     return <button onClick={() => setVal(true)}>Click</button>;
diff --git a/src/immer.ts b/src/immer.ts
index d5c5fc9..8498b35 100644
--- a/src/immer.ts
+++ b/src/immer.ts
@@ -1,27 +1,16 @@
-import createState from ".";
-import { produce as baseProduce } from "immer";
-
-/**
- * The producer is used to update the state immutably.
- * If it's a function, it will be called with the current draft state.
- * If it's a value, the state will be replaced with the value.
- * @param draft The current draft state you will make changes on.
- * @returns If you return a new state, the state will be updated with the new state.
- * If you return nothing, the draft will be used to update the state.
- */
-export type Producer<T> = T | ((draft: T) => T | void);
+import createState, { producer, NextState } from ".";
+import { produce } from "immer";
+import { compose, SetStoreX } from "./utils";
 
 /**
  * It's similar to the base create function, but it uses Immer to update the state immutably.
  */
-export default function create<T>(init: T) {
+export function create<S>(init: S) {
   const [useStore, setStore] = createState(init);
-  return [
-    useStore,
-    (producer: Producer<T>) => setStore((state) => produce(state, producer)),
-  ] as const;
+  return [useStore, compose(setStore, immer)] as const;
 }
 
-export function produce<T>(state: T, producer: Producer<T>) {
-  return producer instanceof Function ? baseProduce(state, producer) : producer;
+export default function immer<S>(next: SetStoreX<S>) {
+  return (ns: NextState<S>, opts?: object) =>
+    next((s) => produce(s, producer(ns)), opts);
 }
diff --git a/src/index.test.tsx b/src/index.test.tsx
index 21cab22..a0412f8 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -1,11 +1,11 @@
 import { it, expect, describe } from "vitest";
 import { userEvent } from "@vitest/browser/context";
 import { render, screen } from "@testing-library/react";
-import create, { useEqual } from ".";
+import create from ".";
 import { renderToString } from "react-dom/server";
 
 it("create", async () => {
-  const [useVal, setVal, getVal] = create(false);
+  const [useVal, setVal] = create(false);
 
   function A() {
     return <button onClick={() => setVal(true)}>Click</button>;
@@ -26,7 +26,6 @@ it("create", async () => {
   expect(screen.queryByText("OK")).toBeNull();
   await userEvent.click(screen.getByText("Click"));
   expect(screen.getByText("OK")).not.toBeNull();
-  expect(getVal()).toBe(true);
 });
 
 it("multiple listeners", async () => {
@@ -78,29 +77,6 @@ it("selector", async () => {
   expect(screen.getByText("OK")).not.toBeNull();
 });
 
-it("selector with equal", async () => {
-  const [useVal, setVal] = create({ val: "test" });
-
-  let count = 0;
-
-  function A() {
-    count++;
-    const [{ val }] = useVal(
-      useEqual(
-        (s) => [s],
-        ([a], [b]) => a.val === b.val
-      )
-    );
-    return <button onClick={() => setVal({ val: "test" })}>{val}</button>;
-  }
-
-  render(<A />);
-
-  await userEvent.click(screen.getByText("test"));
-
-  expect(count).toBe(1);
-});
-
 describe("server component", async () => {
   it("basic", () => {
     const [useVal] = create(1);
diff --git a/src/index.ts b/src/index.ts
index 3c71e58..ad4a992 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,32 +1,45 @@
-import { SetStateAction, useRef, useSyncExternalStore } from "react";
+import { useSyncExternalStore } from "react";
 
-export type Equal<P> = (a: P, b: P) => boolean;
-
-export type Selector<T, P> = (val: T, serverSide: boolean) => P;
+/**
+ * A function to select a part of the state to return.
+ */
+export type Selector<S, R> = (state: S, serverSide: boolean) => R;
 
 /**
- * A hook to use the state.
+ * A React hook to use the state.
  */
-export type UseStore<T> = {
+export type UseStore<S> = {
   /**
    * @returns The current state.
    */
-  (): T;
+  (): S;
 
   /**
-   * @param selector A function to select a part of the state to return.
    * @returns The selected part of the state.
    */
-  <P>(selector: Selector<T, P>): P;
+  <R>(selector: Selector<S, R>): R;
 };
 
 /**
- * A hook to create a global state that can be used across components.
+ * A function to produce the next state based on the previous state.
+ */
+export type Produce<S> = (previous: S) => S | void;
+
+/**
+ * A state or a function to get next state.
+ */
+export type NextState<S> = S | Produce<S>;
+
+/**
+ * A function to update the state. It can be used outside the React components.
+ */
+export type SetStore<S> = (nextState: NextState<S>) => void;
+
+/**
+ * Creates a global store for cross-component state management.
  * @param init The initial value of the state.
- * @returns A React hook to use the state, a function to update the state, and a function to get the state.
- * If you want a component to rerender when the state changes, you can use the hook.
  */
-export default function create<T>(init: T) {
+export default function create<S>(init: S) {
   type Listener = () => void;
   let state = init;
 
@@ -39,16 +52,16 @@ export default function create<T>(init: T) {
     };
   };
 
-  const useStore: UseStore<T> = <P>(
-    selector: Selector<T, P> = (val: T) => val as unknown as P
+  const useStore: UseStore<S> = <P>(
+    selector: Selector<S, P> = (val: S) => val as unknown as P
   ) => {
     const get = (serverSide: boolean) => () => selector(state, serverSide);
-    return useSyncExternalStore<T | P>(subscribe, get(false), get(true));
+    return useSyncExternalStore<S | P>(subscribe, get(false), get(true));
   };
 
-  const setStore = (act: SetStateAction<T>) => {
+  const setStore: SetStore<S> = (ns: NextState<S>) => {
     // update val with the new value
-    state = act instanceof Function ? act(state) : act;
+    state = producer(ns)(state) as S;
 
     // notify all listeners
     for (const listener of listeners) {
@@ -56,27 +69,13 @@ export default function create<T>(init: T) {
     }
   };
 
-  return [useStore, setStore, () => state] as const;
+  return [useStore, setStore] as const;
 }
 
 /**
- *
- * @param selector Same as the selector in useStore.
- * @param equal If equal returns true, the previous selected value will be returned,
- * else the current selected value will be returned.
+ * Converts a NextState to a Produce function.
  * @returns
  */
-export function useEqual<T, P>(
-  selector: Selector<T, P>,
-  equal: Equal<P>
-): Selector<T, P> {
-  const prev = useRef<P>();
-
-  return (val, serverSide) => {
-    const selected = selector(val, serverSide);
-    return (prev.current =
-      prev.current !== undefined && equal(prev.current, selected)
-        ? prev.current
-        : selected);
-  };
+export function producer<S>(ns: NextState<S>): Produce<S> {
+  return ns instanceof Function ? ns : () => ns;
 }
diff --git a/src/persistent.test.tsx b/src/persistent.test.tsx
index b402483..a991584 100644
--- a/src/persistent.test.tsx
+++ b/src/persistent.test.tsx
@@ -3,6 +3,7 @@ import { cleanup, render, screen } from "@testing-library/react";
 import createPersistentStorage, {
   createLocalStorage,
   defaultKey,
+  saveHistory,
 } from "./persistent";
 
 describe("URLStorage", () => {
@@ -17,7 +18,7 @@ describe("URLStorage", () => {
   });
 
   it("basic", () => {
-    const [useVal, setVal, , getVal] = createPersistentStorage("01");
+    const [useVal, setVal] = createPersistentStorage("01");
 
     function A() {
       return <div>{useVal()}</div>;
@@ -26,7 +27,6 @@ describe("URLStorage", () => {
     render(<A />);
 
     expect(screen.getByText("01")).not.toBeNull();
-    expect(getVal()).toBe("01");
 
     cleanup();
 
@@ -58,7 +58,7 @@ describe("URLStorage", () => {
       return <div>{useVal()}</div>;
     }
 
-    setVal(() => "02", true);
+    setVal(() => "02", { [saveHistory]: true });
 
     render(<A />);
 
@@ -102,7 +102,7 @@ describe("localStorage", () => {
   });
 
   it("basic", () => {
-    const [useVal, setVal, getVal] = createLocalStorage("01");
+    const [useVal, setVal] = createLocalStorage("01");
 
     function A() {
       return <div>{useVal()}</div>;
@@ -111,7 +111,6 @@ describe("localStorage", () => {
     render(<A />);
 
     expect(screen.getByText("01")).not.toBeNull();
-    expect(getVal()).toBe("01");
 
     cleanup();
 
diff --git a/src/persistent.ts b/src/persistent.ts
index 305f739..07e34be 100644
--- a/src/persistent.ts
+++ b/src/persistent.ts
@@ -1,81 +1,79 @@
-import createState from ".";
-import { type Producer, produce } from "./immer";
+import create, { producer } from ".";
+import { compose, SetStoreX } from "./utils";
+import immer from "./immer";
 
 export const defaultKey = "global-state";
 
-/**
- * A hook to create a global state that is persisted in the url hash, it uses immer for state mutation.
- * @param key The key to use in the url hash.
- * @param init The initial value of the state.
- * @returns A hook to use the state, a function to update the state, a function to set the state by current url hash,
- * and a function to get the state.
- */
-export default function createURLStorage<T>(init: T, key = defaultKey) {
-  const storage = new URLStorage<T>(key);
-  const getVal = () => storageGetter(storage, init);
-  const [useStore, baseSetStore, getStore] = createState(getVal());
+export default function createPersistentStorage<T>(init: T, key = defaultKey) {
+  const storage = new URLStorage(key, init);
+  const [useStore, setStore] = create(storage.get());
+  const setByStorage = () => setStore(storage.get());
+  return [
+    useStore,
+    compose(setStore, immer, urlStorage(storage)),
+    setByStorage,
+  ] as const;
+}
 
-  const setStore = (producer: Producer<T>, saveHistory: boolean = false) => {
-    baseSetStore((val) => {
-      val = produce(val, producer);
-      storage.set(val, saveHistory);
+export function createLocalStorage<T>(init: T, key = defaultKey) {
+  const storage = new LocalStorage(key, init);
+  const [useStore, setStore] = create(storage.get());
+  return [useStore, compose(setStore, immer, localStorage(storage))] as const;
+}
 
-      return val;
-    });
-  };
+export const saveHistory = Symbol("saveHistory");
 
-  const setByStorage = () => baseSetStore(getVal);
+export type URLStorageOptions = { [saveHistory]?: boolean };
 
-  return [useStore, setStore, setByStorage, getStore] as const;
+export function urlStorage<S>(storage: URLStorage<S>) {
+  return function (next: SetStoreX<S>): SetStoreX<S> {
+    return (ns, opts?: URLStorageOptions) => {
+      const produce = producer(ns);
+      next((state) => {
+        const s = produce(state) as S;
+        storage.set(s, opts?.[saveHistory]);
+        return s;
+      }, opts);
+    };
+  };
 }
 
-/**
- * A function to create a global state that is persisted with the provided storage.
- * @param storage The storage to use.
- * @param init The initial value of the state.
- * @returns A hook to use the state, a function to update the state, and a function to get the state.
- */
-export function createLocalStorage<T>(init: T, key = defaultKey) {
-  const storage = new LocalStorage<T>(key);
-  const [useStore, baseSetStore, getStore] = createState(
-    storageGetter(storage, init)
-  );
-
-  const setStore = (producer: Producer<T>) => {
-    baseSetStore((val) => {
-      val = produce(val, producer);
-      storage.set(val);
-      return val;
-    });
+export function localStorage<S>(storage: LocalStorage<S>) {
+  return function (next: SetStoreX<S>): SetStoreX<S> {
+    return (ns, opts) => {
+      const produce = producer(ns);
+      next((state) => {
+        storage.set(state);
+        return produce(state);
+      }, opts);
+    };
   };
-
-  return [useStore, setStore, getStore] as const;
 }
 
-class LocalStorage<T> {
-  constructor(private key: string) {}
+export class LocalStorage<S> {
+  constructor(private key: string, private init: S) {}
 
   get() {
-    const item = localStorage.getItem(this.key);
-    return item === null ? undefined : (JSON.parse(item) as T);
+    const item = window.localStorage.getItem(this.key);
+    return item === null ? this.init : (JSON.parse(item) as S);
   }
 
-  set(val: T) {
-    localStorage.setItem(this.key, JSON.stringify(val));
+  set(val: S) {
+    window.localStorage.setItem(this.key, JSON.stringify(val));
   }
 }
 
-class URLStorage<T> {
-  constructor(private key: string) {}
+export class URLStorage<S> {
+  constructor(private key: string, private init: S) {}
 
   get() {
     const hash = location.hash.substring(1);
     const params = new URLSearchParams(hash);
     const item = params.get(this.key);
-    return item === null ? undefined : (JSON.parse(item) as T);
+    return item === null ? this.init : (JSON.parse(item) as S);
   }
 
-  set(val: T, saveHistory?: boolean) {
+  set(val: S, saveHistory?: boolean) {
     const hash = location.hash.substring(1);
     const params = new URLSearchParams(hash);
     params.set(this.key, JSON.stringify(val));
@@ -89,8 +87,3 @@ class URLStorage<T> {
     }
   }
 }
-
-function storageGetter<T>(storage: { get: () => T | undefined }, init: T) {
-  const item = storage.get();
-  return item === undefined ? init : item;
-}
diff --git a/src/utils.test.tsx b/src/utils.test.tsx
new file mode 100644
index 0000000..eaed44f
--- /dev/null
+++ b/src/utils.test.tsx
@@ -0,0 +1,51 @@
+import { it, expect } from "vitest";
+import { userEvent } from "@vitest/browser/context";
+import { render, screen } from "@testing-library/react";
+import create, { producer, SetStore } from ".";
+import { compose, Middleware, useEqual } from "./utils";
+
+it("selector with equal", async () => {
+  const [useVal, setVal] = create({ val: "test" });
+
+  let count = 0;
+
+  function A() {
+    count++;
+    const [{ val }] = useVal(
+      useEqual(
+        (s) => [s],
+        ([a], [b]) => a.val === b.val
+      )
+    );
+    return <button onClick={() => setVal({ val: "test" })}>{val}</button>;
+  }
+
+  render(<A />);
+
+  await userEvent.click(screen.getByText("test"));
+
+  expect(count).toBe(1);
+});
+
+it("compose", async () => {
+  let state = 0;
+  const set: SetStore<number> = (ns) => {
+    state = producer(ns)(state)!;
+  };
+
+  const addOne: Middleware<number> = (next) => (ns) => {
+    next((s) => {
+      return producer(ns)(s)! + 1;
+    });
+  };
+
+  const double: Middleware<number> = (next) => (ns) => {
+    next((s) => {
+      return producer(ns)(s)! * 2;
+    });
+  };
+
+  compose(set, addOne, double)(2);
+
+  expect(state).toBe(6);
+});
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..d5d0926
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,47 @@
+import { useRef } from "react";
+import { NextState, type Selector } from ".";
+
+export type Equal<R> = (a: R, b: R) => boolean;
+
+/**
+ *
+ * @param selector Same as the selector in useStore.
+ * @param equal If equal returns true, the previous selected value will be returned,
+ * else the current selected value will be returned.
+ * @returns
+ */
+export function useEqual<S, R>(
+  selector: Selector<S, R>,
+  equal: Equal<R>
+): Selector<S, R> {
+  const prev = useRef<R>();
+
+  return (val, serverSide) => {
+    const selected = selector(val, serverSide);
+    return (prev.current =
+      prev.current !== undefined && equal(prev.current, selected)
+        ? prev.current
+        : selected);
+  };
+}
+
+/**
+ * A function to update the state with options.
+ */
+
+export type SetStoreX<S> = (nextState: NextState<S>, options?: object) => void;
+
+/**
+ * A middleware to update the state with options.
+ */
+export type Middleware<S> = (next: SetStoreX<S>) => SetStoreX<S>;
+
+/**
+ * Composes multiple middlewares.
+ */
+export function compose<S>(
+  setStore: SetStoreX<S>,
+  ...middlewares: Middleware<S>[]
+) {
+  return middlewares.reduceRight((s, middleware) => middleware(s), setStore);
+}