React Redux Introduction: When, Why, and How (2025)

React Redux is a state management library commonly used in large scale React applications. It allows you to manage global state outside of components and avoid prop drilling.

📌 Why Use Redux?

• To share state globally across components
• To separate logic from UI
• To handle complex state logic in large applications
• To debug easily using Redux DevTools

📌 When to Use Redux?

• When multiple components need access to the same state
• When prop drilling becomes a problem
• When you need centralized state logic
• When your app scales and has multiple developers

📌 How Redux Works

1. Store – holds the state
2. Action – describes what happened
3. Reducer – describes how state changes based on action
4. Dispatch – sends action to reducer
5. useSelector – access state in components
6. useDispatch – send actions from components

✅ Redux Setup Example

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

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

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export 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;
  

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './features/counter/counterSlice';

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

  return (
    

      
Count: {count}
       dispatch(increment())}>+
       dispatch(decrement())}>-
    
  );
}

export default App;
  

📦 Wrap Your App with Provider

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
  

👉 With this setup, you now have a global state management solution using Redux in your React app.