Redux — Predictable Global State Management for JS Apps

What it is

Redux is the original predictable state container for JavaScript applications. It enforces a unidirectional data flow: actions describe what happened, reducers specify how state changes, and the store holds the single source of truth. Modern Redux is written with Redux Toolkit (RTK), which eliminates most of the boilerplate that gave Redux its verbose reputation.

It is designed for large-scale React applications where multiple components need to read and write shared state, and where debugging state transitions via time-travel tooling provides real value.

How it saves time or tokens

RTK's createSlice generates action creators and action types automatically from reducer functions, replacing three separate files with one. configureStore sets up the Redux DevTools extension and default middleware without manual configuration. RTK Query handles data fetching, caching, and cache invalidation, eliminating the need for separate libraries like react-query for server state in Redux-heavy codebases.

How to use

1. Install Redux Toolkit and React-Redux.

npm i @reduxjs/toolkit react-redux

1. Create a slice with state and reducers.

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 } });

1. Connect the store to your React app.

import { Provider, useSelector, useDispatch } from 'react-redux';
import { store, increment } from './store';

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

function App() {
  return <Provider store={store}><Counter /></Provider>;
}

Example

Using RTK Query for API data fetching:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
  endpoints: (builder) => ({
    getPokemon: builder.query({ query: (name: string) => `pokemon/${name}` }),
  }),
});

export const { useGetPokemonQuery } = pokemonApi;

Related on TokRepo

• Coding tools -- Developer libraries and frameworks for frontend and backend.
• Prompt library -- Reusable prompts for generating Redux boilerplate with AI.

Common pitfalls

• Using Redux for local component state that does not need to be shared. Use React's built-in useState for truly local UI state.
• Mutating state directly without Immer. RTK uses Immer under the hood, but only inside createSlice reducers. Direct mutations outside of RTK will break.
• Over-fetching with RTK Query because cache tags are not configured. Define proper tag types and invalidation rules to avoid stale data.