리덕스는 상태 관리를 위한 효율적인 도구입니다. 그러나 일반적으로 리덕스는 동기적인 작업에 최적화되어 있습니다. 비동기 작업을 처리하기 위해서는 redux-thunk를 사용하여 리덕스 액션 생성자에서 비동기 코드를 처리할 수 있습니다.

redux-thunk란?

redux-thunk는 리덕스의 미들웨어 중 하나로, 액션 생성자가 함수를 반환할 수 있게 해줍니다. 이 함수는 dispatch 및 getState를 매개변수로 받아 비동기 작업을 처리하고, 필요한 경우 새로운 액션을 dispatch할 수 있습니다.

redux-thunk 설치

먼저, redux-thunk를 설치해야 합니다.

npm install redux-thunk

또한, redux-thunk 미들웨어를 스토어에 적용해야 합니다.

예시

다음은 redux-thunk를 사용하여 비동기 API 호출을 처리하는 예시 코드입니다.

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

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

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

store.dispatch(fetchData());

위 코드에서 fetchData 액션 생성자는 비동기 액션을 생성하고, 이를 dispatch하여 상태를 업데이트합니다.

이렇게 redux-thunk를 사용하면, 비동기 작업을 보다 편리하게 처리할 수 있습니다.

결론

리덕스를 사용할 때 비동기 작업을 처리해야 하는 경우, redux-thunk를 활용하면 편리하게 비동기 작업을 처리할 수 있습니다. redux-thunk를 사용하여 비동기 액션 생성자를 만들고, 이를 dispatch하여 상태를 업데이트할 수 있습니다.