Frontend

Redux

A predictable state container: a single store, changes only through actions and reducers.

Official siteRepository

What it is

Dan Abramov and Andrew Clark created Redux in 2015, inspired by the Flux architecture and Elm. All app state lives in one store and changes only through actions handled by pure reducer functions.

This gives predictability, convenient logging and time-travel debugging (Redux DevTools). But classic Redux had lots of boilerplate, so today Redux Toolkit (RTK) is the official recommendation: createSlice, configureStore and RTK Query for requests.

Redux is not tied to React (there is react-redux) and works with any UI. For simple state, useState, Context or lighter libraries (Zustand) are often enough today, and Redux is chosen where a large shared model is needed.

Use it when

  • Large shared state touched by many parts of the app.
  • You need traceable changes, DevTools and strict update rules.
  • The team already knows Redux and has an existing codebase.

Avoid it when

  • A small app: local state and Context are enough.
  • Server data: TanStack Query or RTK Query beat a hand-rolled cache in the store.

Key concepts

Store
The single store of application state.
Action
A plain object describing an event: { type, payload }.
Reducer
A pure function (state, action) => newState with no side effects.
Selector
A function that derives needed data from state and can memoize the result.
Redux Toolkit
The official toolkit: createSlice with Immer lets you write mutating-looking code that stays immutable.

Example

A slice and store in Redux Toolkit.

Interview questions

  1. 1. Why must a reducer be a pure function?

    So the same state and action always give the same result. This gives predictability and testability and makes time-travel debugging work. Side effects go into thunks or middleware.

  2. 2. Why can't you mutate state directly in Redux?

    Redux compares references to detect changes. A mutation bypasses that comparison and the UI will not update. Redux Toolkit uses Immer so you can write comfortably.

  3. 3. What is middleware?

    A layer between dispatch and the reducer that can log, run async actions (thunk) or alter an action.

  4. 4. Redux or Context?

    Context passes values down the tree but does not optimize updates and has no tooling. Redux suits large, frequently changing shared state with DevTools and rules.

Interview questions from the bank

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform