Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 23, 2022 02:52 pm GMT

Redux combineReducers

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 contactconst 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


Original Link: https://dev.to/shubhamtiwari909/redux-combinereducers-mk0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To