리덕스 툴킷과 많이 사용하는 미들웨어(redux-saga, redux-thunk 등)

리덕스 툴킷은 Redux를 편리하게 사용할 수 있도록 도와주는 도구이다. 여기에는 몇 가지 흔히 사용되는 미들웨어가 있다.

redux-thunk

비동기 작업을 처리하기 위한 미들웨어로, 함수 형태의 액션을 생성하여 비동기 작업을 수행할 수 있다.

const fetchData = () => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());

    try {
      const data = await api.fetchData();
      dispatch(fetchDataSuccess(data));
    } catch (error) {
      dispatch(fetchDataFailure(error));
    }
  };
};

redux-logger

액션의 디스패치와 상태의 변화를 콘솔에 로깅하는 데 사용된다. 개발 환경에서 주로 사용되며, 디버깅을 용이하게 한다.

import { createLogger } from 'redux-logger';

const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger));

dux-persist

스토어의 상태를 지속적으로 저장하고, 새로고침 등의 상황에서도 상태를 유지할 수 있게 도와주는 미들웨어다.

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

redux-saga

액션을 모니터링하고, 특정 액션이 발생하면 비동기 작업을 수행하는 데 사용되는 미들웨어이다. Generator 함수를 사용하여 복잡한 비동기 흐름을 관리할 수 있다.

function* fetchDataSaga() {
  try {
    const data = yield call(api.fetchData);
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

function* rootSaga() {
  yield takeEvery(FETCH_DATA_REQUEST, fetchDataSaga);
}

리덕스 툴킷은 configureStore 함수를 통해 기본적으로 redux-thunk를 내장하고 있어서 비동기 작업을 간단하게 처리할 수 있다.