React - configureStore를 사용한 스토어 생성

 

Redux의 버전이 4.2로 올라가면서 변경사항이 하나 생겼다. 액션 스토어를 생성하기 위해 사용하던 createStore가 deprecated가 되었다. 비록 계속해서 사용할 수는 있지만 redux toolkit의 configureStore로 대체하는 것을 권장하고 있다.

createStore는 리듀서와 미들웨어를 추가할 때, 설치해야 하는 요소가 많다는 복잡함을 가지고 있다. 하지만 이를 간단하고 단순하게 만든 @reduxjs/toolkit의 configureStore를 사용하면오류의 확률을 줄이고 편하게 사용할 수 있다.

 

1. 설치

npm install @reduxjs/toolkit -D
yarn add @reduxjs/toolkit -D

 

2. import 방법

import { configureStore } from '@reduxjs/toolkit';

설치한 패키지 @reduxjs/toolkit에서 configureStore를 가져온다.

 

3. 사용법

 

3-1. combineReducers로 사용할 리듀서들을 묵어준다.

// modules/index.js
import { combineReducers } from "redux";
import loading from "./loading";

const rootReducer = combineReducers({loading});

export default rootReducer;

 

3-2. 액션 함수 생성

// modules/loading.js
// Actions
const SET_LOADING = "loading/SET_LOADING";

// Action functions
export const setLoading = loadingState => ({
    type : SET_LOADING, loadingState
})

// Store State Lists
const initialState = {
    loadingState: false,
    loadingTest: "123 Loading!"
};

// Switch / Case Redux Actions
export default function loading(state = initialState, action) {
    switch(action.type) {
        case SET_LOADING:
            return {
                ...state,
                loadingState: action.loadingState
            }
        default:
            return state;
    }
}

 

3-3. configureStore 생성

// createStore대신 configureStore를 사용한다
const store = configureStore({
  reducer: rootReducer, // combineReducers로 리듀서를 묶은 리덕스 모듈 파일
  middleware: [ReduxThunk, logger], // 사용할 미들웨어들을 나열
  devTools: true, // 기본은 true로 설정되어있다. 개발자 도구의 사용 여부를 정한다.
  preloadedState : {
    loading: {
      loadingState: true,
      loadingTest: "123 Loading!",
    }
  }, // 리덕스 스토어가 생성될 때, 초기값을 정의한다.
  
});

• reducer : modules/index.js에 combineReducers로 사용할 리듀서들을 묶은 index파일을 가져온다.
• middleware : 액션이 실행될 때, 로그를 찍는 logger 등의 사용할 미들웨어들을 나열한다.
• devTools : 개발자 도구 사용 여부를 나타내며 true, false로 값을 지정할 수 있다.
• preloadedState : 스토어가 처음 생성될 때, 스토어의 초기값을 설정한다. rootReducer에 포함되어져 있는 스토어만 사용 가능하다. 즉, 3-2의 initialState에 속해있는 값들의 초기값들을 설정하는 부분이다.

 

4. 계속 createStore를 사용하는 방법

configureStore의 등장으로 createStore를 Deprecated되었지만 계속해서 사용할 수 있다. 취소선이 그어져 있는 비권장 표시가 없는 상태에서 사용하고자 한다면 legacy_createStore를 추가하여 사용하면 된다.

 

import { legacy_createStore as createStore } from 'redux';

기존 createStore 부분에 legacy_createStore as 를 추가하면 취소선 없는 상태에서 createStore를 기존과 동일하게 사용할 수 있다.

---

참고 사이트 : 

https://redux-toolkit.js.org/api/configureStore

configureStore | Redux Toolkit

 

https://github.com/reduxjs/redux/releases

Releases · reduxjs/redux