Published on
šŸµ 3 min read

How to Set Up Redux in a React Project?

Authors

Photo

Overview

What is Redux ?

Redux is a state management library commonly used with JavaScript frameworks like React. It helps manage the global state of an application in a predictable way by centralizing all the state in a single store. In Redux, the state is updated through actions and reducers:

  • Actions: Plain objects that describe what happened (e.g., user clicked a button).
  • Reducers: Functions that take the current state and an action, then return a new state.
  • Store: The centralized place where the application's state is kept.

By using Redux, you can easily track changes in your app, debug more effectively, and share state across components without having to pass props manually.

Redux DevTools

Redux Devtools help debugging applicationā€™s state changes. It provides state chart, state action history logs.

It generates test code for following test libraries:

  • Jest
  • Mocha
  • Tape
  • Ava

Redux toolkit

Redux toolkit simplifies the general structure of redux. The redux core setup can contain lot of boilerplate code .redux toolkit helps developers to simplify and reduce boilerplate code so we can focus on the general logic of our application.

How to setup redux in React application ?

Take the following stepts to setup redux in your react application:

1- Install necessary packages

yarn add @reduxjs/toolkit react-redux

2- Create store

import { configureStore } from '@reduxjs/toolkit'
import productReducer from './slice'

export const store = configureStore({
  reducer: {
    product: productReducer,
  },
})

This is the redux store of state. The configureStore method creates redux store and configures the Redux DevTools extension. And as you can see you can insert multiple reducers.

3 - Provide the Redux Store to state

import { Provider } from 'react-redux'
import { store } from './store'
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

We pass the redux store to Provider. This Provider makes the state available to all react components so they can make operations like mutation or accessing.

4- Create Redux State Slice

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  products: [
    {
      price: '10$',
      name: 'test',
      stock: 0,
    },
  ],
  added: false,
}

export const ProductSlice = createSlice({
  name: 'product',
  initialState,
  reducers: {
    toggleAdded: (state) => {
      state.added = !state.added
    },
    addProduct: (state, action) => {
      state.products = [...state.products, action.payload]
    },
  },
})

export const { toggleAdded, addProduct } = ProductSlice.actions
export default ProductSlice.reducer

The createSlice method takes the following parameters:

  • name of slice
  • initial state
  • reducers

A reducer is a pure function for handling state change.

As you can see we define our state logic using redux slice.

5 - useSelector and useDispatch to access and mutate the state

const state = useSelector((state) => state.product)
const dispatch = useDispatch()
function HandleClick() {
  return dispatch(toggleAdded())
}
return (
  <div>
    <p>Added: {state.added.toString()}</p>
    <button onClick={() => HandleClick()}>Toggle Added</button>
  </div>
)

The useSelector method reads the data from store.

We use useDispatch method to call reducer actions.

Resources: