React에서 Redux, Reducer, 그리고 Redux-Saga를 활용한 상태 관리(Redux-DevTools)
리액트 애플리케이션을 개발하다 보면 상태 관리가 복잡해지는 경우가 많습니다. 이런 상황에서 상태 관리를 보다 체계적으로 관리하기 위해 Redux를 사용할 수 있습니다. 또한, 비동기 작업을 효율적으로 처리하기 위해 Redux-Saga를 활용할 수 있습니다. 이번 글에서는 리덕스(Redux), 리듀서(Reducer), 사가(Saga)에 대해 자세히 알아보겠습니다.
1. Redux란?
Redux는 애플리케이션의 상태를 중앙에서 관리하는 라이브러리입니다. Redux는 상태를 예측 가능하게 관리하며, 다양한 컴포넌트 간에 데이터를 쉽게 공유할 수 있도록 돕습니다.
Redux의 주요 개념은 다음과 같습니다:
- 스토어(Store): 애플리케이션의 상태를 담고 있는 객체입니다.
- 액션(Action): 상태에 변화를 일으키는 객체입니다. 액션은 타입(type)과 페이로드(payload)를 가집니다.
- 리듀서(Reducer): 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.
- 디스패치(Dispatch): 액션을 스토어에 전달하는 함수입니다.
dispatch는 Redux에서 액션을 발생시키는 함수입니다. 액션은 상태 변경을 위한 지시사항이라고 볼 수 있습니다. 위 코드에서는 직접적으로 보이지 않지만, 컴포넌트에서 다음과 같이 사용될 것입니다:
dispatch(fetchCallbacksRequest({ page: 1, size: 20 }));2. 리듀서(Reducer)란?
리듀서는 Redux에서 상태 변화를 처리하는 순수 함수입니다. 현재 상태와 액션을 받아서 새로운 상태를 반환합니다.
아래는 createSlice를 사용한 리듀서 예제입니다:
// 콜백 상태를 위한 인터페이스 정의
interface CallbackState {
isCallbackLoading: boolean; // 콜백 데이터 로딩 중 여부
isCallbackSuccess: boolean; // 콜백 데이터 로드 성공 여부
isCallbackError: boolean; // 콜백 데이터 로드 실패 여부
isDeletingCallback: boolean; // 콜백 삭제 중 여부
/*
생략
*/
};
}
// 초기 상태 정의
const initialState: CallbackState = {
// ... (초기값 설정)
};
// 콜백 관련 리듀서 정의
const callbackSlice = createSlice({
name: "callback",
initialState,
reducers: {
// 콜백 데이터 요청 액션
fetchCallbacksRequest: (state, action: PayloadAction<{ page: number, size: number }>) => {
state.isCallbackLoading = true;
// ... (상태 업데이트)
},
// 콜백 데이터 요청 성공 액션
fetchCallbacksSuccess: (state, action: PayloadAction<any>) => {
state.isCallbackLoading = false;
state.callbackData = action.payload;
// ... (상태 업데이트)
},
// 콜백 데이터 요청 실패 액션
fetchCallbacksError: (state, action: PayloadAction<string>) => {
state.isCallbackLoading = false;
state.error = action.payload;
// ... (상태 업데이트)
},
// 콜백 상태 초기화 액션
resetCallbackState: (state) => {
// ... (상태 초기화)
},
// 콜백 삭제 요청 액션
deleteCallbackRequest: (state, action: PayloadAction<any[]>) => {
state.isDeletingCallback = true;
// ... (상태 업데이트)
},
// 콜백 삭제 성공 액션
deleteCallbackSuccess: (state) => {
state.isDeletingCallback = false;
// ... (상태 업데이트)
},
// 콜백 삭제 실패 액션
deleteCallbackError: (state, action: PayloadAction<string>) => {
state.isDeletingCallback = false;
state.deleteCallbackError = action.payload;
},
},
});
// 액션 생성자 내보내기
export const {
fetchCallbacksRequest,
fetchCallbacksSuccess,
fetchCallbacksError,
resetCallbackState,
deleteCallbackError,
deleteCallbackRequest,
deleteCallbackSuccess
} = callbackSlice.actions;
위 코드에서 callbackSlice는 상태와 액션을 정의하고, 리듀서 함수를 자동으로 생성합니다. 각 액션에 대응하는 상태 변화를 관리합니다.
3. Redux-Saga란?
Redux-Saga는 Redux 애플리케이션에서 비동기 작업을 처리하기 위한 미들웨어입니다. Redux-Saga는 제너레이터 함수를 사용하여 비동기 작업을 효율적으로 관리할 수 있게 해줍니다.
Saga의 주요 개념은 다음과 같습니다:
- 사가(Saga): 제너레이터 함수로 작성된 비동기 작업 처리 함수입니다.
- 이펙트(Effect): 사가 내부에서 발생하는 비동기 작업입니다. 예를 들어 call, put 등이 있습니다.
- takeEvery: 특정 액션 타입에 대해 모든 액션을 처리합니다.
- takeLatest: 특정 액션 타입에 대해 마지막 액션만 처리합니다.
아래는 Redux-Saga의 예제입니다:
import { call, put, takeLatest } from 'redux-saga/effects';
import {
fetchCallbacksRequest,
fetchCallbacksSuccess,
fetchCallbacksError,
deleteCallbackError,
deleteCallbackRequest,
deleteCallbackSuccess
} from '../reducers/callback';
import api from './axiosInstance';
// 콜백 데이터를 가져오는 API 호출 함수
const fetchCallbacksAPI = (page: number, size: number) => {
return api.get(`/user/callback?page=${page}&size=${size}`);
}
// fetchCallbacksRequest 액션에 대응하는 사가 함수
function* handleFetchCallbacks(action: ReturnType<typeof fetchCallbacksRequest>) {
try {
const { page, size } = action.payload;
console.log('Fetching callbacks...', { page, size });
const result = yield call(fetchCallbacksAPI, page, size); // API 호출
console.log('API response:', result);
yield put(fetchCallbacksSuccess(result.data)); // 성공 액션 디스패치
} catch (error) {
console.error('Error fetching callbacks:', error);
yield put(fetchCallbacksError(error.response?.data?.message || 'An error occurred while fetching callbacks')); // 실패 액션 디스패치
}
}
// 콜백 데이터를 삭제하는 API 호출 함수
const deleteCallbacksAPI = (callbackIds: any[]) => {
return api.post('/user/callback/delete', callbackIds);
}
// deleteCallbackRequest 액션에 대응하는 사가 함수
function* handleDeleteCallbacks(action: ReturnType<typeof deleteCallbackRequest>) {
try {
yield call(deleteCallbacksAPI, action.payload); // API 호출
yield put(deleteCallbackSuccess()); // 성공 액션 디스패치
// 삭제 후 목록 새로고침
yield put(fetchCallbacksRequest({ page: 0, size: 20 }));
} catch (error) {
yield put(deleteCallbackError(error.response?.data?.message || 'An error occurred while deleting callbacks')); // 실패 액션 디스패치
}
}
// 루트 사가
export default function* callbackSaga() {
yield takeLatest(fetchCallbacksRequest.type, handleFetchCallbacks); // 최신 fetchCallbacksRequest 액션만 처리
yield takeLatest(deleteCallbackRequest.type, handleDeleteCallbacks); // 최신 deleteCallbackRequest 액션만 처리
}
위 코드에서 handleFetchCallbacks와 handleDeleteCallbacks 사가는 비동기 작업(API 호출)을 처리합니다. takeLatest를 사용하여 최신 액션만 처리하도록 설정했습니다.
4. Redux와 Saga의 통합
리덕스와 사가를 통합하여 사용하려면 redux-saga 미들웨어를 설정해야 합니다. 기본적인 설정 과정은 다음과 같습니다:
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import callbackReducer from './reducers/callback';
import callbackSaga from './sagas/callback';
// 사가 미들웨어 생성
const sagaMiddleware = createSagaMiddleware();
// 스토어 설정
const store = configureStore({
reducer: {
callback: callbackReducer, // 콜백 리듀서 등록
},
middleware: [sagaMiddleware], // 사가 미들웨어 적용
});
// 사가 실행
sagaMiddleware.run(callbackSaga);
export default store;
위 코드에서 configureStore를 사용하여 스토어를 설정하고, createSagaMiddleware로 사가 미들웨어를 생성하여 스토어에 적용합니다. 그런 다음 sagaMiddleware.run을 호출하여 루트 사가를 실행합니다.
이렇게 Redux와 Redux-Saga를 사용하여 React 애플리케이션에서 상태 관리와 비동기 작업을 효율적으로 처리할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높이고, 애플리케이션의 상태를 보다 체계적으로 관리할 수 있습니다.
Redux DevTools
Redux 애플리케이션의 상태를 모니터링하고 디버깅하기 위한 도구입니다. Redux는 애플리케이션 상태를 예측 가능하게 관리하기 위한 상태 관리 라이브러리이며, Redux DevTools는 이를 더 효과적으로 사용하고 디버깅하는 데 도움을 줍니다
상태를 한번에 확인이 가능하며
어떤 것들을 작성했는지도 한번에 알 수 있는 편리한 도구이다.