前端系统设计：Redux Toolkit vs Zustand vs Jotai

Source: Dev.to

为什么这个比较重要

随着你的 React 应用规模扩大，局部状态很快就不够用了。你会开始处理：

• 跨屏幕共享的数据
• 异步 API 调用
• 缓存
• 全局 UI 状态
• 可预测的调试

高层次思维模型

架构图

flowchart TB
  UI -->|dispatch| Store
  Store --> Reducers
  Reducers --> Store
  Store -->|select| UI

flowchart TB
  UI --> Store
  Store --> UI

flowchart TB
  UI --> Atom1
  UI --> Atom2
  Atom1 --> Atom3

Redux Toolkit

Redux Toolkit 是官方的、带有主观意见的 Redux 使用方式。它强制执行：

• 单一事实来源
• 不可变更新
• 单向数据流
• 可预测性

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

const usersSlice = createSlice({
  name: 'users',
  initialState: [],
  reducers: {
    setUsers: (state, action) => action.payload,
  },
});

优点

• ✅ 适合大型团队
• ✅ 使用 Redux DevTools 的强大调试功能

缺点

• ❌ 相比替代方案有更多样板代码

Zustand

Zustand 是一个基于 Hook 的极简全局状态库。无需 reducer。

import create from 'zustand';

const useUserStore = create(set => ({
  users: [],
  setUsers: users => set({ users }),
}));

Pros

• ✅ 极其简洁的 API
• ✅ 极低的样板代码

Cons

• ❌ 没有强制的结构，可能导致大型代码库中的不一致性

Jotai

Jotai 基于原子状态。每个状态片段都是独立且可组合的。

import { atom } from 'jotai';

const usersAtom = atom([]);
const filteredUsersAtom = atom(get =>
  get(usersAtom).filter(u => u.active)
);

Pros

• ✅ 细粒度重新渲染（原子级响应性）
• ✅ 非常适合高度响应式 UI

Cons

• ❌ 对于新手来说，思维模型可能更难理解

并排功能比较

重新渲染策略

要点

• Jotai 提供最细粒度的更新。
• Redux Toolkit 提供最强的可预测性保证。
• Zustand 是最易于采用的。

何时选择哪个库

决策指南

• 应用规模 – 较大、长期维护的应用受益于 Redux Toolkit 的结构。
• 团队规模 – 大团队需要强约定（Redux）或明确边界（Zustand）。
• 复杂 UI 状态 – 选择 Jotai 以获得细粒度的响应式。
• 速度与简洁 – Zustand 在快速开发中表现出色。

实际用例映射

Interview‑ready summary

• Redux Toolkit：最适合企业级规模的应用，提供开发工具和强大的约定，但会增加样板代码。
• Zustand：API 极简，适合小型到中型项目，没有强制的模式。
• Jotai：原子状态，理想用于 UI 密集、对性能有要求的场景，需要不同的思维模型。

进一步阅读

• 系统设计文章：systemdesignwithzeeshanali
• 源代码：