Redux combineReducers

#react #redux #programming #webdev

Hello guyz today i am going to show you the use of combineReducers in Redux.
So, I was creating a MERN project and wanted to use 2 separate reducers to perform CRUD operation on 2 different database , then i read about combineReducers which helped me to implement the logic i was trying to find

I am assuming you have already know about redux so, i am going to show the combineReducer directly without telling about the whole process of redux setup

Lets get started...

Reducers -

ContactReducer.js

import axios from 'axios'

const contactReducer = (state = [], action) => {
    switch (action.type) {
        case "FETCH":
            state = action.payload
            return state
        case "ADD_CONTACT":
            axios
                .post("http://localhost:3001/Register", action.payload)
                .then((res) => console.log(res))
                .catch((err) => console.log(err));
            return state
        case "UPDATE_CONTACT":
            axios
                .put("http://localhost:3001/update", action.payload)
                .then((response) => console.log(response))
                .catch((err) => console.log(err));
            return state
        case "DELETE_CONTACT":
            console.log(action.payload)
            axios             
         .delete(`http://localhost:3001/delete/${action.payload}`)
                .then((response) => console.log(response))
                .catch((err) => console.log(err));
            return state
        default:
            return state;
    }
}

export default contactReducer;

SignupReducers.js

import axios from 'axios'

const contactReducer = (state = [], action) => {
    switch (action.type) {
        case "FETCH_USER":
            state = action.payload
            return state
        case "ADD_USER":
            axios
                .post("http://localhost:3001/RegisterUser", action.payload)
                .then((res) => console.log(res))
                .catch((err) => console.log(err));
            return state
        default:
            return state;
    }
}

export default contactReducer;

I have created 2 separate reducers and each reducers perform the action on different database and return the response separately

Reducers.js

import { combineReducers } from "redux";
import contactReducer from "./contactReducer";
import signupReducer from "./signupReducer";

const rootReducer = combineReducers({ contact: contactReducer, signup: signupReducer })

export default rootReducer

As you can see i have created a rootReducer which contains both the reducers namely contact and signup and these identifiers will be used to access the reducer from state (like state.contact).

Using the reducers separately

index.js - Here we create the store for redux

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './redux/Reducers';
import { Provider } from 'react-redux';

const store = createStore(rootReducer, composeWithDevTools());

As you can see , we have created the store using our rootReducer which have both the reducers states.

Accessing the States of each reducer

AddContact.js

import { useSelector, useDispatch } from 'react-redux'

const AddContact = () => {
const contacts = useSelector(state => state.contact);
//getting the data from initial state of contact
const dispatch = useDispatch();//for dispatching the method
.
.
.
.
  const data = {
    uniqueId,
    name,
    email,
    number
}
dispatch({ type: "ADD_CONTACT", payload: data });
//this will perform the operation in contact reducers
.
.
.
}

Signup.js

import { useSelector, useDispatch } from 'react-redux'

const Signup = () => {
.
.
const dispatch = useDispatch();

useEffect(() => {
        axios.get("http://localhost:3001/SignupInfo")
            .then((response) => {
//this will perform the operation on signup reducer
                dispatch({ type: "FETCH_USER", payload: response.data })
            })
            .catch((err) => console.log(err));
    }, [dispatch])
    const users = useSelector((state) => state.signup);
//getting the data from initial state of signup
}

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-claymorphism-2pkd

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj