Redux Saga의 Fetch Entity패턴 — 반복되는 작업 줄이기

리덕스 사가를 사용하다보면 모듈을 만들때마다 총 4단계의 반복되는 작업을 하게 됩니다.

1. 서버로 요청을 보내기 전 REQUEST Action dispatch
2. 서버로 API 호출
3. API 호출 성공시 SUCCESS Action dispatch
4. API 호출 실패시 FAILURE Action dispatch

REQUEST 액션은 API 호출을 하는동안 로딩 상태를 표현하기 위해서 Dispatch합니다.

fetchEntity 패턴은 이런 반복되는 태스크들을 재활용 하기 위한 패턴입니다.

fetchEntity에서 entity란

위 4단계 액션에 대한 액션 생성 함수들의 집합입니다.

fetchEntity에서 fetch란

trigger의 의미를 담고 있습니다. entity를 trigger하는 함수를 fetchEntity라고 생각하면 됩니다. entity가 trigger되면(fetchEntity함수가 실행되면) 위 4가지 비동기 태스크가 순서대로 실행되게 됩니다.

fetchEntity 패턴 흐름도

패키지 구조

우선은 자바스크립트 버전으로 코드를 이해 한뒤 타입스크립트 버전으로 리팩토링 할 계획입니다.

리덕스, 리덕스 사가와 관련된 모든 코드들을 store폴더에 몰아 넣었습니다.

• store/modules : 각 기능 단위로 리덕스 모듈들이 들어갑니다.
• store/modules/index.ts : 루트 사가와 루트 리듀서를 만들어줍니다.

• store/index.ts : 리덕스 스토어를 생성해주는 함수인 configureStore를 export해줍니다.

리덕스 모듈 살펴보기

이제 각 모듈들이 어떻게 구성되어 있는지 살펴볼 차례입니다.

test/TestApi.js

Api 파일에는 서버에 비동기 호출을 하는 함수들이 모여 있습니다.

test/TestSagaActions.js

TestSaga에서 사용하는 액션들이 모여있는 파일입니다.

서버에서 Test Data를 불러오는 엔티티를 TestDataEntity라고 했을때,

우리는 이 TestSagaActions파일안에 비동기 처리와 관련된 액션의 이름과 액션 생성 함수들을 정의해준것입니다.

test/TestSaga.js

Saga에서 사용하는 액션을 정의해줬으니까 이번엔 Saga를 정의해 줄 차례입니다.

test/TestReducer.js

이제 마지막으로 리듀서를 정의해 줄 차례입니다. 사가에서 dispatch하는 3가지 액션(REQUEST, SUCCESS, FAILURE)를 이 리듀서에서 처리해주는것이죠.

별 다를것 없는 평범한 리듀서입니다. 참고로 이 리듀서는 비동기 액션들만 처리하는것이 아니라 동기 액션들도 이곳에서 처리합니다.