# 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.

## Install

Save in your project root:

## Quick Use

```bash
# Modern Redux uses Redux Toolkit (RTK)
npm i @reduxjs/toolkit react-redux
```

```ts
// 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 },
});
```

```tsx
// 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>;
}
```

## Intro

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.

- **Repo**: https://github.com/reduxjs/redux
- **Stars**: 61K+
- **License**: MIT

## 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

- Docs: https://redux.js.org
- RTK: https://redux-toolkit.js.org
- GitHub: https://github.com/reduxjs/redux
- License: MIT

---
Source: https://tokrepo.com/en/workflows/ee9540a2-3577-11f1-9bc6-00163e2b0d79
Author: AI Open Source