Configs2026年4月11日·1 分钟阅读

Redux — Predictable Global State Management for JS Apps

Redux is the original predictable state container for JavaScript apps. Modern Redux uses Redux Toolkit (RTK) which reduces boilerplate 80% and includes RTK Query for server state. Still the standard for large-scale React apps.

AI
AI Open Source · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

# Modern Redux uses Redux Toolkit (RTK)
npm i @reduxjs/toolkit react-redux
// store.ts
import { configureStore, createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
  },
});

export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});
// App.tsx
import { Provider, useSelector, useDispatch } from "react-redux";
import { store, increment } from "./store";

function Counter() {
  const value = useSelector((s: any) => s.counter.value);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(increment())}>{value}</button>;
}
介绍

Redux is the original predictable state container for JavaScript apps. Inspired by Elm and Flux, it popularized the reducer pattern. Modern Redux uses Redux Toolkit (RTK) — official, opinionated, batteries-included. RTK reduces boilerplate by ~80% and is the recommended way to write Redux code today.

What Redux Does

  • Single source of truth — one global state tree
  • State is read-only — updated via dispatched actions
  • Pure reducers — (state, action) => newState
  • DevTools — time-travel debugging
  • Middleware — thunks, sagas, listeners for side-effects
  • RTK Query — server state with caching (alternative to React Query)
  • createSlice — auto-generate actions + reducers
  • Immer — write mutating code, RTK converts to immutable

Architecture

Dispatched action → reducer(s) → new state → subscribers rerender. Store holds state, useSelector subscribes, useDispatch sends actions. Middleware intercepts actions for async work.

Self-Hosting

Client library only.

Key Features

  • Redux DevTools browser extension
  • Time-travel debugging
  • RTK Query (server state)
  • createSlice / createAsyncThunk
  • Listener middleware
  • TypeScript-first
  • React, Vue, Angular, Svelte bindings
  • SSR-compatible

Comparison

Library Boilerplate DevTools Server State Size
Redux Toolkit Low Best RTK Query ~13KB
Zustand Minimal Redux DevTools No ~1KB
Jotai Atomic Yes Via suspense ~3KB
Valtio Minimal Yes No ~3KB
MobX Reactive Yes No ~15KB

常见问题 FAQ

Q: Redux 过时了吗？ A: 没有。用 RTK 写的 Redux 代码量和 Zustand 差不多，但保留了 DevTools 时间旅行和大规模可维护性。

Q: RTK Query vs React Query？ A: 功能重叠。RTK Query 更贴近 Redux 生态，共享 store；React Query 更轻，API 更简洁。

Q: 何时用 Redux vs Zustand？ A: 超大应用、严格架构、跨团队协作 → Redux。小中型、追求简洁 → Zustand。

来源与致谢 Sources

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Socket.IO — Bidirectional Realtime Event-Based Communication

Socket.IO is a library that enables low-latency, bidirectional, event-based communication between a client and server. Built on WebSocket with fallbacks, automatic reconnection, room-based broadcast, and first-class Node.js support.

AI Open Source

axios — Promise-Based HTTP Client for Browser & Node.js

axios is the most popular HTTP client for JavaScript — promise-based, isomorphic (browser + Node), with request/response interceptors, automatic JSON transforms, CSRF protection, and built-in cancellation. Battle-tested since 2014.

AI Open Source

Lucide — Beautiful & Consistent Icon Toolkit

Lucide is a beautiful and consistent icon toolkit made by the community — a fork of Feather Icons with 1500+ crisp, minimalist SVG icons. First-class React, Vue, Svelte, Solid, Angular, and Web Component libraries.

AI Open Source
◈首页🔍搜索👤我的