Hello guyz 오늘은 Redux에서 combineReducers를 사용하는 방법을 보여드리겠습니다.
그래서 저는 MERN 프로젝트를 만들고 있었고 2개의 서로 다른 데이터베이스에서 CRUD 작업을 수행하기 위해 2개의 별도 감속기를 사용하고 싶었습니다. 그런 다음 찾고자 하는 논리를 구현하는 데 도움이 되는 combineReducers에 대해 읽었습니다.

나는 당신이 redux에 대해 이미 알고 있다고 가정하고 있으므로 redux 설정의 전체 과정에 대해 설명하지 않고 combineReducer를 직접 보여 드리겠습니다.

시작하자...

감속기 -

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;

2개의 별도 감속기를 생성했으며 각 감속기는 다른 데이터베이스에서 작업을 수행하고 별도로 응답을 반환합니다.

감속기.js

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

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

export default rootReducer

보시다시피 나는 리듀서, 즉 연락처와 가입을 모두 포함하는 rootReducer를 생성했으며 이러한 식별자는 상태(예: state.contact)에서 리듀서에 액세스하는 데 사용됩니다.

감속기를 별도로 사용

index.js - 여기에서 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());

보시다시피 두 리듀서 상태가 모두 있는 rootReducer를 사용하여 저장소를 만들었습니다.

각 감속기의 상태에 액세스

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
}

이것이 이번 포스트의 전부입니다.
이 게시물을 읽어 주셔서 감사합니다. 실수를 발견하거나 제안하고 싶은 경우 댓글 섹션에 언급하십시오.
^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.