Dispatch an Action – Defines what should happen.
Reducer Updates State – A pure function modifies state without side effects.
New State is Available – Components re-render with the updated state.

Redux is often used with React via react-redux, but it can work with any framework or even standalone.

Getting Started with Redux

Installing Redux and React-Redux

npm install redux react-redux

redux: Core library.
react-redux: Integration tools for React applications.

Creating a Redux Store

The store is the centralized location where application state is maintained.

1 import { createStore } from "redux";
2 
3 // Initial state
4 const initialState = {
5   counter: 0,
6 };
7 
8 // Reducer function
9 function counterReducer(state = initialState, action) {
10   switch (action.type) {
11     case "INCREMENT":
12       return { ...state, counter: state.counter + 1 };
13     case "DECREMENT":
14       return { ...state, counter: state.counter - 1 };
15     default:
16       return state;
17   }
18 }
19 
20 // Creating store
21 const store = createStore(counterReducer);
22 console.log(store.getState()); // { counter: 0 }

Actions: Defining Intentions

Actions describe events in the application and have a required type property.

1 const incrementAction = { type: "INCREMENT" };
2 const decrementAction = { type: "DECREMENT" };

Connecting Redux with React

Use Provider from react-redux to make the store available to all components.

1 import React from "react";
2 
3 import ReactDOM from "react-dom";
4 import { Provider } from "react-redux";
5 import { createStore } from "redux";
6 
7 import App from "./App";
8 import counterReducer from "./reducers";
9 
10 const store = createStore(counterReducer);
11 
12 ReactDOM.render(
13   <Provider store={store}>
14     <App />
15   </Provider>,
16   document.getElementById("root")
17 );

Using Redux in Components

Use useSelector to access the store and useDispatch to send actions.

jsx

1 import React from "react";
2 
3 import { useDispatch, useSelector } from "react-redux";
4 
5 function Counter() {
6   const counter = useSelector((state) => state.counter);
7   const dispatch = useDispatch();
8 
9   return (
10     <div>
11       <h1>Counter: {counter}</h1>
12       <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
13       <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
14     </div>
15   );
16 }
17 
18 export default Counter;

Simplifying Redux with Redux Toolkit

Redux Toolkit (RTK) reduces boilerplate code and improves efficiency.

Installing Redux Toolkit

npm install @reduxjs/toolkit

Using Redux Toolkit

RTK provides createSlice to define reducers and actions in one place.

1 import { configureStore, createSlice } from "@reduxjs/toolkit";
2 
3 const counterSlice = createSlice({
4   name: "counter",
5   initialState: { value: 0 },
6   reducers: {
7     increment: (state) => {
8       state.value += 1;
9     },
10     decrement: (state) => {
11       state.value -= 1;
12     },
13     incrementByAmount: (state, action) => {
14       state.value += action.payload;
15     },
16   },
17 });
18 
19 export const { increment, decrement, incrementByAmount } = counterSlice.actions;
20 
21 const store = configureStore({
22   reducer: {
23     counter: counterSlice.reducer,
24   },
25 });
26 
27 export default store;

Middleware in Redux

Middleware enhances Redux functionality by handling side effects like logging and async operations.

Example: Logging Middleware

1 import { applyMiddleware, createStore } from "redux";
2 import logger from "redux-logger";
3 
4 const store = createStore(rootReducer, applyMiddleware(logger));

Handling Asynchronous Operations with Redux Thunk

Redux is synchronous by default. To handle API calls, use redux-thunk.

Installing Redux Thunk

Async Action Using Thunk

1 import { applyMiddleware, createStore } from "redux";
2 import thunk from "redux-thunk";
3 
4 const store = createStore(rootReducer, applyMiddleware(thunk));
5 
6 export const fetchUsers = () => async (dispatch) => {
7   dispatch({ type: "FETCH_USERS_REQUEST" });
8   try {
9     const response = await fetch("https://jsonplaceholder.typicode.com/users");
10     const data = await response.json();
11     dispatch({ type: "FETCH_USERS_SUCCESS", payload: data });
12   } catch (error) {
13     dispatch({ type: "FETCH_USERS_FAILURE", payload: error.message });
14   }
15 };

Real-World Example: E-Commerce Store

Consider a store selling pet products. The app needs to handle:

Product listings: Fetching and displaying products from an API.
Shopping cart management: Adding/removing products and updating totals.
User authentication: Managing user sessions for order processing.
Order processing: Handling payment and shipping details.

Each of these is managed as a separate Redux slice for modularity and scalability.

Product Slice

1 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
2 
3 export const fetchProducts = createAsyncThunk(
4   "products/fetchProducts",
5   async () => {
6     const response = await fetch("https://api.example.com/cat-products");
7     return response.json();
8   }
9 );
10 
11 const productsSlice = createSlice({
12   name: "products",
13   initialState: { items: [], status: "idle", error: null },
14   extraReducers: (builder) => {
15     builder
16       .addCase(fetchProducts.pending, (state) => {
17         state.status = "loading";
18       })
19       .addCase(fetchProducts.fulfilled, (state, action) => {
20         state.status = "succeeded";
21         state.items = action.payload;
22       })
23       .addCase(fetchProducts.rejected, (state, action) => {
24         state.status = "failed";
25         state.error = action.error.message;
26       });
27   },
28 });
29 
30 export default productsSlice.reducer;

This modular approach makes the application scalable and easy to maintain.

Conclusion

Redux is a powerful tool for managing complex application state, but it is not always necessary. For simpler apps, React Context API may suffice. However, when dealing with large applications requiring predictable state management, Redux (especially with Redux Toolkit) is invaluable.

Understanding the Redux Ecosystem: From Concept to Implementation

Introduction

Benefits of Redux