처음 만난 리덕스 (Redux) 문서
10.3 Redux와 Async Logic
Reducer에서는 비동기 로직을 허용하지 않는다고 했는데, 그렇다면 Redux에서 실제로 비동기 로직을 처리하기 위해서는 어떻게 해야 할까요?
지금부터는 Redux에서 비동기 로직을 처리하는 방법에 대해서 배워보도록 하겠습니다.
Redux에서 비동기 로직을 처리하는 방법은 바로 Middleware를 사용하는 것입니다.
middleware는 앞에서 Redux Store를 설명할 때 나왔었는데요, middleware는 Redux에 원하는 기능을 추가할 수 있게 해주는 함수입니다.
middleware를 사용하면 Redux Store에서 Action이 처리될 때 함께 작동하길 원하는 코드를 끼워 넣을 수 있습니다.
그리고 applyMiddleware() 함수를 사용해서 여러 개의 middleware를 하나로 합칠 수도 있었습니다.
Redux에서는 여러가지 middleware 중에서 특별히 비동기 로직을 처리해주는 middleware를 끼워 넣어서 비동기 로직을 처리할 수 있습니다.
그러한 비동기 로직을 처리해주는 middleware중에서 대표적인 것이 바로 redux-thunk와 redux-saga입니다.
이 두 가지 middleware에 대해서는 뒤에 나올 강의에서 자세히 배워보도록 하겠습니다.
여기에서는 먼저 비동기 로직이 들어간 middleware를 직접 만드는 방법에 대해서 살펴보도록 하겠습니다.
import apiClient from '../api/client';
const delayedActionMiddleware = store => next => action => {
if (action.type === 'my-app/post/ADDED') {
setTimeout(() => {
// 1000ms(1초) 뒤에 action이 처리되도록 함
next(action);
}, 1000);
return;
}
return next(action);
}
const fetchPostsMiddleware = store => next => action => {
if (action.type === 'my-app/post/FETCH') {
// API를 호출하여 서버로부터 데이터를 받아옴
apiClient.get('posts').then(posts => {
// 서버에서 받은 데이터와 함께 action을 dispatch
store.dispatch({ type: 'my-app/post/LOADED', payload: posts });
});
}
return next(action);
}
이 코드는 비동기 로직을 처리하는 두 가지 형태의 Redux middleware 예시 코드입니다.
먼저 첫 번째 middleware는 delayedActionMiddleware입니다.delayedActionMiddleware는 이름 그대로 action을 일정 시간을 delay 시킨 이후에 처리되도록 하는 middleware입니다.
여기에서는 JavaScript의 setTimeout() 함수를 사용해서 1000ms. 즉, 1초 뒤에 action이 처리되게 하였습니다.
그리고 밑에 나오는 두 번째 middleware는 fetchPostsMiddleware입니다.fetchPostsMiddleware는 서버로부터 posts 데이터를 받아오는 middleware입니다.
먼저 my-app/post/FETCH라는 action이 발생하면 서버에 데이터를 요청하고,
이후 서버에서 응답이 오면 해당 응답에 포함되어 있는 데이터와 함께 my-app/post/LOADED action을 dispatch합니다.
여기서 살펴본 것처럼, Redux에서는 이러한 형태로 middleware를 사용해서 비동기 로직을 처리할 수 있습니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.