[React Redux] store에 reducer 여러개 등록하여 사용하기.

React 에 Redux 를 세팅할때 store 는 무조건 하나여야 한다.

하지만 여러 효율적 그리고 유지보수의 용이성 측면을 고려할때 하나의 store 안에서도 여러개의 reducer 를 활용해 store 를 구조화하여 사용할 수도 있다.

 

예를들어 하나의 앱에 상품 구매 목록 관련 action, reducer와 장바구니용 action, reducer 를 따로 관리할 수 있다는 것이다.

 

위 모든 기능들을 하나의 action, reducer 로 관리한다면 각각의 action 과 reducer 코드가 너무나도 길어져 효율성이 떨아지고 유지보수측면에서도 많이 떨어질것이다.

 

현재 포스팅에서는 멀티 Reducer 를 활용하여 store 를 구조화시키는 아주 간단한 방법을 기록할것이다.

 

멀티 리듀서 적용 결과물 github : https://github.com/bumrei/redux-practice-react/tree/multi_reducer_setting

GitHub - bumrei/redux-practice-react: This is the repository for the redux setting and using practice.

branch : multi_reducer_setting 이다.

폴더 구성 및 action, reducer 세팅

store/starwarsInfo 라는 폴더를 만들고 하위에 actions.js, reducers.js 파일을 생성해준다.

 

그다음 간단하게 reducers.js 와 actions.js 를 구성해준다.

// src/store/starwarsInfo/actions.js

import { createAction } from "redux-actions";

export const MULTI_REDUCER_TEST = 'haTest2/MULTI_REDUCER_TEST';

export const multiReducerTest = createAction(MULTI_REDUCER_TEST, (value) => ({value}))

// src/store/starwarsInfo/reducers.js

import { fromJS } from "immutable";
import { handleActions } from "redux-actions";
import { MULTI_REDUCER_TEST } from "./actions";

const initialState = fromJS({
    data1: '',
    data2: '',
})

const multiTest = handleActions(
    {
        [MULTI_REDUCER_TEST]: (state, action) => {
            const {value} = action.payload;
            return state.set('data1', value);
        }
    },
    initialState
);

export default multiTest;

 

그다음 src/store/index.js 파일에 combineReducers() 에 새로 추가한 reducer 를 추가해준다.

import { combineReducers } from "redux";
import forTheTest from "./reduxTest/reducers";
import multiTest from "./starwarsInfo/reducers";

const rootReducer = combineReducers({
    forTheTest,
    // 새로 추가한 reducer
    multiTest
})

export default rootReducer;

 

그럼 새로운 Reducer 등록 완료이다.

 

화면 테스트

src/page/ReduxBasicTest.js 에 로직 추가

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as reduxTest from '../store/reduxTest/actions';
import * as multiReducer from '../store/starwarsInfo/actions';

const ReduxBasicTest = () => {
    const dispatch = useDispatch();
    const [content, setContent] = useState('');
    const [contentTwo, setContentTwo] = useState('');
    const result = useSelector((state) => state.forTheTest);
    const resultTwo = useSelector((state) => state.multiTest);

    const handleRedux = () => {
        dispatch(reduxTest.writeAny(content));
        setContent('');
    }

    const handleMultiReducer = () => {
        dispatch(multiReducer.multiReducerTest(contentTwo));
        setContentTwo('');
    }

    return (
        <div>
            <h1>Here is the page for the redux basic test</h1>
            <input onChange={(e) => setContent(e.target.value)} value={content} />
            <button type='button' onClick={handleRedux}>redux Data set</button>
            <h2>{result.getIn(['data1'])}</h2>
            <br />
            <br />
            <br />
            <br />
            <h1>This is the part for the multi reducer test</h1>
            <input value={contentTwo} onChange={(e) => setContentTwo(e.target.value)}/>
            <button type='button' onClick={handleMultiReducer}>multi Reducer Set</button>
            <h2>{resultTwo.getIn(['data1'])}</h2>
        </div>
    );
};

export default ReduxBasicTest;

 

그다음 화면 실행 후 store 에 데이터의 상태값이 정상적으로 최신화 되는지 확인해보자.

첫번째 와 두번째 리듀서가 정상적으로 최신화 되는것을 확인할 수 있다.

 

멀티 리듀서 적용을 간단하게 알아보았다.