FE-11-状态管理：Redux、Zustand、Pinia、MobX 对比

2026-09-21

字数统计: 2.3k字 | 阅读时长≈ 11分

FE-11-状态管理：Redux、Zustand、Pinia、MobX 对比

本节目标：理解前端状态管理的本质，掌握主流方案（Redux Toolkit、Zustand、Pinia、MobX）的设计思想和适用场景。

1. 为什么要状态管理

问题：

组件树深，prop drilling 痛苦
多个组件共享状态，单纯 useState/useContext 容易出问题
状态变化难以追踪、调试
状态分散在各个组件，复用和测试难

什么时候需要状态管理库：

✓ 3+ 个组件共享同一份状态
✓ 状态更新逻辑复杂（多步、异步、依赖前值）
✓ 团队需要统一的状态更新规范
✓ 需要时间旅行调试

什么时候不需要：

✗ 单组件 state（useState 就够）
✗ 父子组件传值（props 就够）
✗ 服务端数据（用 TanStack Query）

2. 状态管理的本质

任何状态管理库都解决三个问题：

存哪：全局 vs 局部
怎么改：action / mutation / setState
怎么通知订阅者：发布订阅 / 响应式 / observer

3. Redux / Redux Toolkit

**Redux = “可预测的状态容器”**。三原则：单一 store、state 只读、用纯函数改。

3.1 核心概念

// store: 全局 state
{ counter: { value: 0 }, user: { name: 'Alice' } }

// action: 描述"发生了什么"
{ type: 'counter/increment' }
{ type: 'counter/incrementBy', payload: 5 }

// reducer: 纯函数 (state, action) => newState
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/increment':
      return { value: state.value + 1 };
    case 'counter/incrementBy':
      return { value: state.value + action.payload };
    default:
      return state;
  }
}

3.2 Redux Toolkit（现代写法）

RTK = Redux + Immer + 工具，大幅简化：

import { createSlice, configureStore } from '@reduxjs/toolkit';

// 1. 创建 slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },  // Immer 让你"改"state
    incrementBy: (state, action) => { state.value += action.payload },
  },
});

// 2. 创建 store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

// 3. 派发 action
const { increment, incrementBy } = counterSlice.actions;
store.dispatch(increment());
store.dispatch(incrementBy(5));

// 4. 订阅
store.subscribe(() => console.log(store.getState()));

3.3 React 中使用

import { Provider, useSelector, useDispatch } from 'react-redux';

<Provider store={store}>
  <App />
</Provider>

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(increment())}>{count}</button>;
}

3.4 异步（createAsyncThunk）

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => { state.loading = true })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export const fetchUser = createAsyncThunk('user/fetch', async (id) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
});

3.5 优缺点

优点：

严格的单向数据流，可预测
时间旅行调试（redux devtools）
适合大型应用
生态成熟

缺点：

模板代码多（RTK 已大幅改善）
心智模型门槛
小项目过度

4. Zustand（推荐）

**Zustand = “轻量 Redux”**，无 action、无 reducer、无 provider。

4.1 基本用法

import { create } from 'zustand';

interface BearState {
  bears: number;
  increase: (by: number) => void;
  reset: () => void;
}

const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((s) => ({ bears: s.bears + by })),
  reset: () => set({ bears: 0 }),
}));

// 组件中使用
function BearCounter() {
  const bears = useBearStore((s) => s.bears);
  const increase = useBearStore((s) => s.increase);
  return <button onClick={() => increase(1)}>{bears}</button>;
}

4.2 选择性订阅（避免不必要 re-render）

// ✓ 只订阅 bears 字段
const bears = useBearStore((s) => s.bears);

// ✗ 订阅整个 state，任何字段变化都触发 re-render
const state = useBearStore();

// 用 shallow 比较
import { shallow } from 'zustand/shallow';
const { bears, fish } = useBearStore((s) => ({ bears: s.bears, fish: s.fish }), shallow);

// 多个独立选择
const bears = useBearStore((s) => s.bears);
const increase = useBearStore((s) => s.increase);

4.3 异步 action

const useUserStore = create((set) => ({
  user: null,
  loading: false,
  fetchUser: async (id) => {
    set({ loading: true });
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    set({ user: data, loading: false });
  },
}));

4.4 切片模式

const createBearSlice = (set) => ({
  bears: 0,
  increase: (by) => set((s) => ({ bears: s.bears + by })),
});

const createFishSlice = (set) => ({
  fish: 0,
  addFish: () => set((s) => ({ fish: s.fish + 1 })),
});

const useStore = create((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}));

4.5 中间件

import { persist, devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    persist(
      (set) => ({ /* ... */ }),
      { name: 'my-store' },  // localStorage key
    ),
  ),
);

4.6 优缺点

优点：

极简 API，5 分钟上手
无 boilerplate
性能好（默认浅比较 + 选择器）
支持中间件（persist、devtools、immer）
不需要 Provider 包裹

缺点：

生态比 Redux 小
没有严格规范（容易写出混乱的 store）

5. Pinia（Vue 官方）

Pinia = Vue 的官方状态管理，替代 Vuex。

5.1 基本用法

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, doubleCount, increment };
});

// 组件中使用
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();

counter.count;          // 读
counter.increment();    // 写
counter.$patch({ count: 10 });  // 批量更新

5.2 选项式（类似 Vuex）

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
    async fetchFromServer() {
      const data = await api.get();
      this.count = data.count;
    },
  },
});

5.3 持久化

import { defineStore } from 'pinia';

export const useStore = defineStore('main', () => {
  // ...
});

import { watch } from 'vue';
import { getActivePinia } from 'pinia';

const pinia = getActivePinia();
pinia.use(({ store }) => {
  const stored = localStorage.getItem(store.$id);
  if (stored) store.$patch(JSON.parse(stored));
  store.$subscribe((mutation, state) => {
    localStorage.setItem(store.$id, JSON.stringify(state));
  });
});

5.4 优缺点

优点：

Vue 官方推荐，TypeScript 友好
完美的 DevTools 支持
组合式 API 风格
支持 SSR
自动类型推导

缺点：

Vue 专用
不能跨框架用

6. MobX（响应式）

**MobX = “透明响应式”**，state 改了自动更新 UI。

6.1 基本用法

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  get doubleCount() {
    return this.count * 2;
  }
}

const store = new CounterStore();

const Counter = observer(() => {
  return (
    <button onClick={() => store.increment()}>
      {store.count} (×2 = {store.doubleCount})
    </button>
  );
});

6.2 优缺点

优点：

心智模型最简单（”改值，UI 自动更新”）
不需要 action / reducer 概念
性能优秀（细粒度响应式）

缺点：

隐式更新，调试稍难
团队规范依赖纪律
学习曲线对 OOP 背景的人友好，对函数式背景不友好

7. Jotai（原子化）

Jotai = Recoil 风格，”原子”状态。

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

优点：极细粒度更新、避免 Context re-render。

8. 选型决策树

你的项目是什么框架？
├── React
│   ├── 中小型项目 → Zustand
│   ├── 大型企业应用 → Redux Toolkit
│   ├── 细粒度响应式 → Jotai / MobX
│   └── 服务端数据为主 → TanStack Query
├── Vue
│   └── Pinia（官方）
└── 跨框架
    └── 不要用状态管理库（用框架原生的）

9. 对比表

特性	Redux Toolkit	Zustand	Pinia	MobX	Jotai
心智模型	严格单向	简单	简单	透明	原子化
模板代码	中	极小	小	小	中
性能	好	极好	好	极好	极好
调试	最好（devtools）	好	好	一般	一般
TypeScript	好	极好	极好	好	好
学习曲线	陡	平	平	中	平
跨框架	✗	✗	✗（Vue 专用）	React	React
适用规模	大	中小	中小	中小	中小

10. 实战：电商购物车

用 Zustand（推荐）：

// store/cart.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  clear: () => void;
  total: () => number;
  itemCount: () => number;
}

export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      items: [],

      addItem: (item) => set((s) => {
        const existing = s.items.find(i => i.id === item.id);
        if (existing) {
          return {
            items: s.items.map(i =>
              i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
            ),
          };
        }
        return { items: [...s.items, { ...item, quantity: 1 }] };
      }),

      removeItem: (id) => set((s) => ({
        items: s.items.filter(i => i.id !== id),
      })),

      updateQuantity: (id, quantity) => set((s) => ({
        items: s.items.map(i =>
          i.id === id ? { ...i, quantity } : i
        ),
      })),

      clear: () => set({ items: [] }),

      total: () => get().items.reduce(
        (sum, i) => sum + i.price * i.quantity, 0
      ),

      itemCount: () => get().items.reduce(
        (sum, i) => sum + i.quantity, 0
      ),
    }),
    { name: 'cart-storage' },
  ),
);

// components/Cart.tsx
function Cart() {
  const items = useCartStore((s) => s.items);
  const total = useCartStore((s) => s.total());
  const remove = useCartStore((s) => s.removeItem);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          {item.name} × {item.quantity} = {item.price * item.quantity}
          <button onClick={() => remove(item.id)}>Remove</button>
        </div>
      ))}
      <p>Total: ${total}</p>
    </div>
  );
}

小结

场景	推荐
React + 中小项目	Zustand
React + 大型应用	Redux Toolkit
React + 细粒度	Jotai / MobX
Vue 3	Pinia
服务端数据	TanStack Query（不算 UI 状态）
表单状态	React Hook Form / VeeValidate

核心建议：

不要为了用状态管理库而用
服务端状态和 UI 状态分离：用 TanStack Query 管 API 数据，用 Zustand/Pinia 管 UI 状态
选择有 devtools 调试的
团队规范比库本身更重要

下一节讲网络与性能优化：HTTP 缓存、CDN、懒加载。

本文作者： CoderSong
本文链接： https://jack-song-gif.github.io/2026/09/21/FE-11-状态管理：ReduxZustandPiniaMobX/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！