리덕스를 state 관리하기 위해 썼다면
단점도 존재한다.
리덕스 처리 과정은 동기적이라서 비동기 작업은 할 수 없음.
ex) api 요청과 같은 기다려야 하는 작업들
이러한 단점을 해결하려고 나온 게 리덕스 미들웨어라고 한다.
미들웨어에서 만드는 함수에서 비동기 처리를 하게 됨 !!
스터디에서는 Redux 미들웨어 중 Redux Thunk 라는 라이브러리를 사용하였다.
Redux Thunk
Redux의 액션 생성자(Actions Creator)에서 일반 객체 대신 함수를 반환할 수 있게 해준다.
이 함수는 dispatch 메서드와 getState 메서드를 인자로 받아서 비동기 작업을 수행하고, 필요한 경우 dispatch 메서드를 사용하여 새로운 액션을 발행할 수 있다.
일반적으로 Redux Thunk는 네트워크 요청이나 데이터베이스 작업과 같은 비동기 작업을 처리할 때 사용된다.
ex) 사용자가 로그인 폼을 제출하면 Redux Thunk를 사용하여 인증 요청을 보내고, 요청이 완료되면 상태를 업데이트하여 사용자를 인증할 수 있다.
이러한 방식으로 Redux Thunk를 사용하면 Redux를 사용하여 애플리케이션의 상태를 효과적으로 관리할 수 있고, 비동기 작업을 간편하게 처리할 수 있게 된다.
이 깃허브를 참고하면 사용 가이드를 확인할 수 있다.
https://github.com/reduxjs/redux-thunk
Redux Thunk를 활용해 비동기 작업을 처리하는 예시
- Redux와 Redux Thunk를 설치
npm install redux redux-thunk
// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 루트 리듀서 파일
// 스토어 생성
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
export default store;이제 액션 생성자(Actions Creator)를 사용하여 비동기 작업을 수행할 수 있다.
사용자 정보를 가져오는 비동기 작업을 처리하는 액션 생성자 만들어 보기
// actions.js
export const fetchUser = () => {
return async (dispatch, getState) => {
try {
// 요청 시작을 알리는 액션 디스패치
dispatch({ type: 'FETCH_USER_REQUEST' });
// 비동기 작업 수행 (여기서는 setTimeout으로 대체)
setTimeout(async () => {
// 비동기 작업 완료 후 사용자 정보 가져오기
const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
const user = await response.json();
// 사용자 정보 가져오기 성공을 알리는 액션 디스패치
dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });
}, 1000); // 1초 후에 실행
} catch (error) {
// 에러 발생 시 에러 처리 액션 디스패치
dispatch({ type: 'FETCH_USER_FAILURE', payload: error.message });
}
};
};fetchUser 액션 생성자는 비동기 함수를 반환하고, Thunk 미들웨어가 이를 처리한다. 이 함수는 dispatch와 getState를 인자로 받아서 비동기 작업을 수행하고, 작업이 완료되면 다시 액션을 디스패치한다. - > 추가적으로 리듀서를 만들어서 액션에 따라 상태를 업데이트 하며 store를 갱신해준다.
