소개
Redux Thunk는 Redux 미들웨어의 일종으로, 비동기 작업을 처리하고 상태를 업데이트하는 데 사용됩니다. 일반적으로 Ajax 요청이나 서버에서 데이터를 가져오는 작업과 같은 비동기 작업을 처리할 때 Redux Thunk를 사용합니다.
설치 및 설정
Redux Thunk를 사용하려면 Redux와 함께 설치해야 합니다. npm을 사용하여 설치합니다.
npm install redux-thunk
설치가 완료되면 Redux Thunk는 Redux와 함께 사용할 수 있게 됩니다. Redux Thunk를 Redux 스토어에 적용하기 위해 applyMiddleware 함수를 사용합니다.
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
비동기 액션 생성자
Redux Thunk를 사용하면 액션 생성자 함수가 액션 객체 대신 함수를 반환할 수 있습니다. 이 함수는 Redux Thunk에 의해 확인되고 실행됩니다. 비동기 작업이 완료되면 내부적으로 액션을 디스패치하여 상태를 업데이트할 수 있습니다.
const fetchData = () => {
return (dispatch) => {
dispatch({ type: 'FETCH_START' });
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_FAILURE', payload: error });
});
};
};
위의 예제에서는 fetchData 액션 생성자가 함수를 반환하고, 이 함수 내에서 비동기 작업이 수행됩니다. FETCH_START 액션을 먼저 디스패치하여 로딩 상태를 표시한 후, 데이터를 가져오는 비동기 작업을 수행합니다. 작업이 성공하면 FETCH_SUCCESS 액션을 디스패치하여 가져온 데이터를 상태에 업데이트하고, 작업이 실패하면 FETCH_FAILURE 액션을 디스패치하여 에러 상태를 표시합니다.
비동기 작업 흐름 제어
비동기 작업을 수행하는 동안 Redux Thunk는 여러 가지 중간 단계를 지원합니다. getState 함수를 사용하여 현재 상태를 가져올 수 있으며, dispatch 함수를 사용하여 다른 액션을 디스패치할 수도 있습니다.
const fetchData = () => {
return (dispatch, getState) => {
const { token } = getState().auth;
dispatch({ type: 'FETCH_START' });
fetch('https://api.example.com/data', {
headers: {
Authorization: `Bearer ${token}`
}
})
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_FAILURE', payload: error });
});
};
};
위의 예제에서는 getState 함수를 사용하여 현재 상태에서 auth 객체의 token 값을 가져옵니다. 이를 활용하여 API 요청 시 헤더에 토큰을 포함시킬 수 있습니다.
결론
Redux Thunk는 Redux 미들웨어로, 비동기 작업을 처리하고 상태를 업데이트하는 데 유용합니다. 비동기 액션 생성자를 사용하여 API 호출이나 데이터 가져오기와 같은 비동기 작업을 처리할 수 있습니다. Redux Thunk를 활용하면 Redux 애플리케이션의 상태 관리를 좀 더 간단하게 구현할 수 있습니다.