How to setup Redux in React Js

Hello devs! This is a quick and to-the-point tutorial on how to set up Redux in React.

Given that you've landed on this article, you probably already know the significance of Redux in state management and why it's a vital tool for managing state in your applications.

Follow me on twitter, I'll help you out with something ... I promise.

ALSO

You could check this tutorial on youtube

There's so many ways to do this and here's the way we are gonna go.

1. On your project's root directory, Run the following command to install the necessary dependencies, npm install react-redux reduxjs/toolkit

2. Open your project's index.js file and wrap the <App/> with Provider from react-redux

Code:

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

reportWebVitals();

<Provider>: Wraps the application in the Redux Provider component, making the Redux store available to all components within the app.

<App />: The main application component that contains the rest of the React components.

1. Create a redux store on the Provider you've just added

const store = configureStore({
  reducer: Reducer,
});

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

Code Explanation:

const store = configureStore({
  reducer: Reducer,
});

Here, we are creating a Redux store using the configureStore function from the @reduxjs/toolkit package. The configureStore function simplifies the setup process and comes with sensible defaults. We pass an object with a reducer property to configureStore, specifying the root reducer (Reducer) which handles state updates.

1. We have declared the root reducer named Reducer but , we have not created one. Do so by creating a store.js file from root directory.

Sample code in the index.js:

import { combineReducers } from 'redux';

//-> reducers imports
import AppReducer from "./AppReducer"
import PostReducer from "./PostReducer"

export default combineReducers({

    app: AppReducer,
    posts:PostReducer


});

Explanaation:

combineReducers: This function from Redux is used to combine multiple reducers into a single root reducer. Each reducer manages its slice of the application state.

AppReducer and PostsReducer: These are example reducers imported from their respective files. Each reducer handles state updates for different parts of the application.

appand posts: These keys represent different slices of the state managed by AppReducer and PostsReducer respectively.

From here, all state updates managed by AppReducer can be accessed in your components using the app key, while updates managed by PostsReducer can be accessed using the posts key

Complete index.js code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

//redux import
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

//reducer import
import Reducer from './reducers';

//router import
import {BrowserRouter} from "react-router-dom";

const store = configureStore({
  reducer: Reducer,
});


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  // Remove BrowserRouter tags if you dont want to use Routing
    <BrowserRouter>
      <Provider store={store}>
          <App />
      </Provider>
    </BrowserRouter>
);

reportWebVitals();

Complete store.js code:

import { combineReducers } from 'redux';

//-> reducers imports
import AppReducer from "./AppReducer"
import PostsReducer from "./PostsReducer"

export default combineReducers({

    app: AppReducer,
    posts:PostsReducer


});

Sample Structure of PostReducer.js:

import {FETCH_POSTS_SUCCESS,} from "../actions/Types";

const INITIAL_STATE = {
    fetchedPosts:[]
};

const PostReducer = (state = INITIAL_STATE, action) => {

    switch (action.type) {

        case FETCH_POSTS_SUCCESS:

        return {...state, fetchedPosts: action.payload,};


        default:
            return state;
    }
};

export default PostReducer;

And just like that you're done setting up redux.

You could check this tutorial on youtube

If, I've just saved your day follow me on twitter and I'll save you another

Adios !