# 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 the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## 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: Is Redux obsolete?**
A: No. Code written with RTK is about as concise as Zustand, but you keep DevTools time travel and maintainability at scale.

**Q: RTK Query vs React Query？**
A: Features overlap. RTK Query fits into the Redux ecosystem and shares the store; React Query is lighter with a cleaner API.

**Q: When should I use Redux vs Zustand?**
A: Very large apps, strict architecture, cross-team collaboration → Redux. Small-to-medium apps that prize simplicity → Zustand.

## Sources & Credits

- 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/redux-predictable-global-state-management-js-apps-ee9540a2
Author: AI Open Source