Redux

Redux is a state container for JavaScript applications. All shared state lives in a single store. The only way to change it is to dispatch an action, a plain object describing what happened, which a reducer function turns into the next state. It is most often used with React through the official Redux Toolkit.

Why it matters

Because every change passes through the same path, state updates are predictable and traceable. Tools like Redux DevTools can list each action and replay or rewind state, which helps debug complex flows. The cost is boilerplate and indirection, so Redux suits large apps with much shared state rather than small ones. Redux Toolkit removes most boilerplate and is the recommended approach today.

Example

import { createSlice, configureStore } from "@reduxjs/toolkit";

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

const store = configureStore({ reducer: counter.reducer });
store.dispatch(counter.actions.increment());
console.log(store.getState().value); // 1

Toolkit uses a library that makes the "mutating" syntax safe by producing an immutable update.

Common mistakes

• Mutating state in a hand-written reducer.
• Storing server data in Redux instead of using a query cache.
• Putting non-serializable values, like functions, in the store.
• Adopting Redux for an app that needs only local state.

Related

• State management
• React
• Functional programming
• Component

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.