Redux Thunk 미들웨어의 동작 원리

18 Oct 2023

redux

Redux Thunk는 Redux 애플리케이션에서 비동기 작업을 처리하기 위한 미들웨어입니다. 이 미들웨어를 사용하면 Redux의 액션 생성자 함수 내에서 비동기 코드를 실행할 수 있습니다.

Thunk란 무엇인가?

Thunk는 함수를 의미합니다. Redux Thunk는 thunk 함수를 생성하고 관리하기 위한 미들웨어입니다. Redux 액션 생성자 함수는 일반적으로 객체를 반환하지만, Redux Thunk를 사용하면 함수인 thunk를 반환할 수 있습니다.

비동기 작업을 위한 Thunk 사용하기

Redux Thunk를 사용하여 비동기 작업을 처리하려면 아래와 같은 단계를 따라야 합니다.

Redux Thunk 미들웨어를 Redux 스토어에 추가합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

액션 생성자 함수 내에서 비동기 작업을 처리하는 thunk 함수를 작성합니다.

const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', error }));
  };
};

thunk 함수를 디스패치하여 비동기 작업을 시작합니다.
```
store.dispatch(fetchData());
```

Redux Thunk의 동작 방식 분석

Redux Thunk 미들웨어는 createStore 함수를 호출할 때 Redux 스토어에 추가됩니다. 이 미들웨어는 액션이 디스패치될 때마다 Redux 스토어의 dispatch 함수에 인터셉트하여 thunk 함수를 처리합니다.

액션 생성자 함수 내에서 thunk 함수를 반환하면 Redux Thunk는 해당 함수를 실행합니다. 이 때, thunk 함수는 Redux 스토어의 dispatch 함수를 인자로 받을 수 있습니다. 이를 이용하여 thunk 함수 내에서 다른 액션을 디스패치하거나 비동기 작업을 수행할 수 있습니다.

결론

Redux Thunk 미들웨어를 사용하면 Redux 애플리케이션에서 비동기 작업을 간편하게 처리할 수 있습니다. thunk 함수를 반환하여 비동기 작업을 수행하고 Redux 스토어의 dispatch 함수를 활용하여 필요한 액션을 디스패치할 수 있습니다.