Redux Toolkit을 사용하여 모달 상태 관리하기

Redux API 대신 Redux ToolKit을 사용하게 된 이유

기존의 프로젝트에서는 Redux API로 상태를 관리하였다. 하지만 전역 상태관리를 해야할 대상이 점점 증가하면서 Redux API로 모든 전역 상태를 관리하면 복잡성이 크게 증가할 것 같았다. 따라서 Redux의 공식적인 추상화 레이어인Redux ToolKit을 통해서 Redux 코드를 더 간결하게 작성하고 싶었다.

Redux ToolKit은 다음과 같은 기능을 제공한다.

1. configureStore(): Redux store를 설정하는 데 필요한 여러 함수 호출을 단일 함수 호출로 감싸준다. (Redux 개발 도구 연동, 미들웨어 설정, Redux Thunk 미들웨어 등을 포함한다)

2. createSlice(): 액션 생성자와 액션 타입, 리듀서를 한 번에 만들어준다.

Redux ToolKit 도입과정

1. 먼저, redux-toolkit 패키지를 설치한다.

npm install @reduxjs/toolkit

2. 기존에 actions.js와 reducer.js에서 수행하던 작업을 modalState.js에서 한 번에 수행하도록 변경한다.

// /src/store/modalSlice.js:

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

// 초기 상태를 정의
const initialState = {
  isLoginModalVisible: false,
  isSignupModalVisible: false,
  isAddProfileImgModalVisible: false,
};

const modalSlice = createSlice({
  // createSlice 함수를 사용하여 리덕스의 액션 생성자와 리듀서 한번에 정의
  name: 'modal',
  initialState,
  reducers: {
    // 액션에 따라 상태를 어떻게 변경할지 정의하는 객체
    showLoginModal: state => {
      state.isLoginModalVisible = true;
    },
    hideLoginModal: state => {
      state.isLoginModalVisible = false;
    },
    showSignupModal: state => {
      state.isSignupModalVisible = true;
    },
    hideSignupModal: state => {
      state.isSignupModalVisible = false;
    },
    showAddProfileImgModal: state => {
      state.isAddProfileImgModalVisible = true;
    },
    hideAddProfileImgModal: state => {
      state.isAddProfileImgModalVisible = false;
    },
  },
});

export const {
  showLoginModal,
  hideLoginModal,
  showSignupModal,
  hideSignupModal,
  showAddProfileImgModal,
  hideAddProfileImgModal,
} = modalSlice.actions;

export default modalSlice.reducer;

3. 그리고 store.js에서는 리덕스 툴킷의 configureStore 함수를 사용하여 스토어를 생성한다.

// /src/store/store.js:
import { configureStore } from '@reduxjs/toolkit';
import modalReducer from './modalState';

export default configureStore({
  reducer: {
    modal: modalReducer,
  },
});

4. 이후, 애플리케이션 내에서 리덕스 스토어에 접근하는 방식을 변경한다. 이전에는 connect 함수나 useSelector 및 useDispatch 훅을 사용하여 스토어에 접근하고 액션을 디스패치했지만, 리덕스 툴킷을 사용하면서 액션 타입 문자열 대신 액션 생성자 함수를 직접 사용할 수 있다.

이런 과정을 거치면서, 액션 타입을 직접 작성하고 액션 생성자 함수와 리듀서 함수를 별도로 작성하는 등의 반복적인 작업을 줄일 수 있었다. 또한, 추후에 액션 생성자 함수를 직접 사용하면서 액션 타입의 오타 등으로 인한 버그 발생 확률을 줄일 수 있을 것으로 기대된다.