🧩 React Redux – Actions, Reducers, and Store (2025 Guide)

---

🧲 Introduction – Why Use Redux in React?

As React applications grow, managing shared and complex state across components becomes challenging. Redux is a predictable state container that helps centralize state, enforce structure, and enable advanced debugging tools like Redux DevTools.

Redux works with actions, reducers, and a central store, making state updates explicit and traceable.

🎯 In this guide, you’ll learn:

• The three core principles: actions, reducers, and the store
• How to integrate Redux with React
• How data flows in a Redux-powered React app
• Real-world patterns and best practices

---

🧩 What Is Redux?

Redux is a unidirectional state management system with three main building blocks:

Concept	Description
Store	Holds the application state
Actions	Plain JS objects describing what happened
Reducers	Pure functions that return updated state

---

🏗️ 1. Setting Up Redux in React

✅ Install Dependencies:

npm install redux react-redux

✅ Optional (for Redux Toolkit):

npm install @reduxjs/toolkit

---

🧃 2. The Redux Store – Global State Container

✅ store.js

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

✅ Redux Toolkit Alternative:

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

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

---

📦 3. Actions – Describe What Happened

Actions are plain JS objects with a type property and optional payload.

✅ Example:

export const increment = () => ({ type: 'INCREMENT' });
export const setUser = (user) => ({ type: 'SET_USER', payload: user });

📘 You dispatch these actions using dispatch(action).

---

🔁 4. Reducers – Handle State Transitions

Reducers receive the current state and the action, then return a new state (without mutating the original).

✅ Example – counterReducer.js:

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

export default counterReducer;

✅ Reducers must be pure functions
✅ Always return new objects (immutability)

---

🌐 5. Connecting Redux to React

✅ Provide the Store in Your App:

import { Provider } from 'react-redux';
import store from './store';

<Provider store={store}>
  <App />
</Provider>

---

✅ Access Redux State with useSelector:

import { useSelector } from 'react-redux';

const count = useSelector((state) => state.counter.count);

---

✅ Dispatch Actions with useDispatch:

import { useDispatch } from 'react-redux';
import { increment } from './actions';

const dispatch = useDispatch();
<button onClick={() => dispatch(increment())}>+</button>;

---

🚀 6. Redux Toolkit – Simpler Redux Setup

Redux Toolkit (RTK) is the official recommended way to use Redux in 2025.

✅ Slice Example:

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count += 1;
    },
  },
});

export const { increment } = counterSlice.actions;
export default counterSlice.reducer;

✅ Supports mutating syntax with Immer (under the hood)
✅ Reduces boilerplate
✅ Includes createAsyncThunk for async actions

---

📘 Redux Data Flow Diagram

Component --> dispatch(action)
          ↓
        Reducer
          ↓
       Store (state)
          ↓
      useSelector() → Component

✅ Data flows one-way through the system

---

📘 Best Practices

✅ Keep state normalized and flat
✅ Use Redux Toolkit to simplify boilerplate
✅ Separate actions, reducers, and selectors
✅ Avoid putting local component state (e.g., input focus) in Redux
✅ Use DevTools to debug and time-travel through actions

---

📌 Summary – Recap & Next Steps

Redux gives you a predictable, centralized way to manage application state in React. With clear actions, reducers, and a global store, you gain control, testability, and debuggability—especially in large apps.

🔍 Key Takeaways:

• Redux organizes state with actions, reducers, and a store
• Data flows in one direction, making it predictable
• Use useSelector to read state, useDispatch to update it
• Redux Toolkit simplifies setup and improves productivity
• Ideal for large apps with complex, shared state

⚙️ Real-World Relevance:
Used in enterprise-level apps like Jira, Slack, Shopify Admin, and complex dashboards where state predictability and structure are critical.

---

❓ FAQ Section

❓ What is the main difference between Context API and Redux?
✅ Context is good for small, simple state sharing. Redux is better for structured, scalable state logic with tooling and middleware.

---

❓ Is Redux still relevant in 2025?
✅ Yes. Redux is actively maintained and recommended for large-scale apps. With Redux Toolkit, it’s more approachable than ever.

---

❓ What triggers a re-render in Redux?
✅ When the selected part of the state returned by useSelector changes.

---

❓ Do I need Redux for small apps?
❌ No. Stick to useState, useReducer, or useContext unless your app has complex shared state.

---

❓ Can I use Redux with Hooks only?
✅ Yes. Use useSelector, useDispatch, and Provider from react-redux.

---

Share Now :