기존의 프로젝트에서는 Redux API로 상태를 관리하였다. 하지만 전역 상태관리를 해야할 대상이 점점 증가하면서 Redux API로 모든 전역 상태를 관리하면 복잡성이 크게 증가할 것 같았다. 따라서 Redux의 공식적인 추상화 레이어인Redux ToolKit을 통해서 Redux 코드를 더 간결하게 작성하고 싶었다.
Redux ToolKit은 다음과 같은 기능을 제공한다.
configureStore(): Redux store를 설정하는 데 필요한 여러 함수 호출을 단일 함수 호출로 감싸준다. (Redux 개발 도구 연동, 미들웨어 설정, Redux Thunk 미들웨어 등을 포함한다)
createSlice(): 액션 생성자와 액션 타입, 리듀서를 한 번에 만들어준다.
redux-toolkit
패키지를 설치한다.npm install @reduxjs/toolkit
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;
store.js
에서는 리덕스 툴킷의 configureStore
함수를 사용하여 스토어를 생성한다.// /src/store/store.js:
import { configureStore } from '@reduxjs/toolkit';
import modalReducer from './modalState';
export default configureStore({
reducer: {
modal: modalReducer,
},
});
connect
함수나 useSelector
및 useDispatch
훅을 사용하여 스토어에 접근하고 액션을 디스패치했지만, 리덕스 툴킷을 사용하면서 액션 타입 문자열 대신 액션 생성자 함수를 직접 사용할 수 있다.이런 과정을 거치면서, 액션 타입을 직접 작성하고 액션 생성자 함수와 리듀서 함수를 별도로 작성하는 등의 반복적인 작업을 줄일 수 있었다. 또한, 추후에 액션 생성자 함수를 직접 사용하면서 액션 타입의 오타 등으로 인한 버그 발생 확률을 줄일 수 있을 것으로 기대된다.