Introduction: Why React Redux Matters

React is great at building dynamic, component-driven UIs. However, as your app grows, managing shared state (like user authentication, theme, or cart data) across many components becomes difficult. That’s where Redux shines.

Redux is a predictable state container for JavaScript apps. It provides a centralized store to manage your application state and a clear pattern for updating it.

Problem Redux Solves: It helps manage complex state interactions and makes debugging and testing state changes much easier.

What is Redux?

Redux follows a unidirectional data flow and revolves around:

• Store – The global state container.

• Actions – Events that describe what happened.

• Reducers – Functions that update the store based on actions.

Step-by-Step: Using Redux in a React App

We’ll use Redux Toolkit (RTK), the official, modern approach recommended by Redux.

✅ 1. Install Required Packages

npm install @reduxjs/toolkit react-redux

✅ 2. Create a Redux Slice

A slice includes state, reducers, and actions in one file.

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

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

✅ 3. Create and Configure the Store

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

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

✅ 4. Provide the Redux Store

Wrap your app in a <Provider> to give components access to the store.

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

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

✅ 5. Access State and Dispatch Actions

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

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

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Redux Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
}

export default App;

✅ Full Working Code Example (React Redux Counter)

This minimal working example includes setup for store, slice, and a basic counter component.

Folder Structure

/src
  └── app
      └── store.js
  └── features
      └── counter
          └── counterSlice.js
  └── App.js
  └── index.js

✅ You can scale this to manage auth, theme, cart, etc.

Comparison: Redux vs Context API

Tips & Common Pitfalls

✅ Best Practices

• Use Redux Toolkit to avoid boilerplate.

• Keep slices modular and focused on one feature.

• Use createAsyncThunk for API calls.

• Memoize selectors using reselect for performance.

❌ Common Mistakes

Conclusion: Make State Predictable with Redux

Redux is a powerful tool for managing global state in large React apps. It shines when your app grows in complexity, offering clear structure, centralized state, and excellent debugging tools.

✅ Key Takeaways:

• Use Redux Toolkit to simplify store and reducer setup.

• Use useSelector to read from the store and useDispatch to update it.

• Use slices to separate features cleanly.