what is Redux ?

Redux is a state management library used with React (or any JavaScript app) to manage the application's global state in a predictable way.

Why Use Redux?

In React, local state (useState) works fine for small apps. But in larger apps, managing shared state across many components becomes hard.

Redux provides:

A centralized store to hold all state
A consistent way to update state using actions
Predictable state flow (unidirectional)
Easier debugging, testing, and time travel with DevTools

Redux Core Concepts

Concept	Description
Store	Single source of truth (holds the entire app state)
Action	An object that describes what happened ({ type: 'INCREMENT' })
Reducer	A pure function that handles actions and returns a new state
Dispatch	Sends an action to the reducer to update the store
Selector	Retrieves specific state from the store

Redux Flow Diagram

UI (React Component)
dispatch(action)
Action (e.g. { type: "ADD_USER" })

Reducer (function that updates state)

New State in Store

UI Re-renders with updated data

Installing Redux with React

npm install redux react-redux

Or use Redux Toolkit (recommended):

npm install @reduxjs/toolkit react-redux

Example with Redux Toolkit

1. Create a Slice

// features/counter/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 },
addBy: (state, action) => { state.value += action.payload }
}
});

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

2. Configure the Store

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

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

3. Provide the Store in index.js

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

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

4. Use Redux in Component

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

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

return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>
<button onClick={() => dispatch(addBy(5))}>+ Add 5</button>
</div>
);
};

When to Use Redux?

Use Redux when:

Many components share state
You need global access (auth, theme, user data)
App grows large and state becomes complex

Don’t use Redux for:

Small apps with limited state
Simple local state (prefer useState, useReducer)

Summary

Concept	Description

Term	Meaning
Redux	Library for managing global state
Store	Central place for all state
Action	Describes what happened
Reducer	Calculates the new state
Dispatch	Sends the action to the store