Redux in React – 5-Minute Quick Review

Here's a short, practical summary to remind you how Redux works, including diagrams and examples using Redux Toolkit with two slices. Perfect for interviews or day-to-day reference.

---

What is Redux?

Redux is a state management library that uses the same concept as React’s useReducer, but globally.

[action] → dispatch → reducer → new state

---

Core Redux Concept

useReducer pattern (local state):

const [state, dispatch] = useReducer(reducer, initialState);

Redux pattern (global state):

store.dispatch({ type: 'ACTION' });

All state lives in a global store and is updated via dispatched actions.

---

Key Redux Components

Redux Store
 ├── dispatch(action)
 ├── reducer(state, action)
 └── state (single source of truth)

---

React-Redux

Redux can be used with any JS app, but React-Redux helps integrate Redux into your React app.

import { Provider } from 'react-redux';
<Provider store={store}> <App /> </Provider>

Use hooks to access store:

• useSelector() to read
• useDispatch() to write

---

Redux Toolkit (RTK)

Redux Toolkit (RTK) is the official, recommended way to write Redux logic. It simplifies:

• Action creators
• Reducer logic
• Boilerplate

---

Creating a Store with Two Slices

Step 1: Install

npm install @reduxjs/toolkit react-redux

Step 2: Create counterSlice.js

import { 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 default counterSlice.reducer;

---

Step 3: Create userSlice.js

import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: { name: '' },
  reducers: {
    setName: (state, action) => { state.name = action.payload }
  }
});

export const { setName } = userSlice.actions;
export default userSlice.reducer;

---

Step 4: Configure Store

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import userReducer from './userSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer
  }
});

---

Step 5: Access State and Dispatch

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

function App() {
  const count = useSelector((state) => state.counter.value);
  const name = useSelector((state) => state.user.name);
  const dispatch = useDispatch();

  return (
    <>
      <p>{name}: {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(setName('Alice'))}>Set Name</button>
    </>
  );
}

---

Slice Diagram

createSlice()
  └── name: "counter"
  └── initialState: { value: 0 }
  └── reducers:
        ├── increment
        └── decrement

→ Automatically generates:
   - Action creators
   - Action types
   - Reducer logic

---

Accessing Redux State

1. Import useSelector and useDispatch
2. Use useSelector to read data
3. Use dispatch(action) to update state
4. Components re-render automatically on change

---

Redux Store Design Tips

1. Identify what state exists
2. Identify how it changes
3. Group related state
4. Create a slice per group

---

Summary

• Use Redux Toolkit to simplify Redux logic
• Keep each slice focused and small
• useSelector to read, dispatch to write
• Redux is ideal for large, shared state across components

Comments

[Karandeep Singh]

Really good explanation and examples! Over the last couple of months, I’ve been digging deep into Redux architecture too, and while it’s mature, I’ve found it quite heavy and verbose for modern patterns. We’ve been experimenting with a lightweight pub-sub architecture for state management that feels cleaner for 2025 apps. Interesting to see different perspectives on this! can read about it on my profile (not doing the promotion though)