Redux Thunk를 사용한 캐시 제어 로직 예제

18 Oct 2023

redux

Redux Thunk는 Redux의 미들웨어로, 비동기 작업을 처리하기 위해 사용됩니다. 이 글에서는 Redux Thunk를 사용하여 캐시 제어 로직을 구현하는 예제를 소개하겠습니다.

1. Redux Thunk 설치하기

먼저 Redux Thunk를 설치해야 합니다. 아래의 명령어를 사용하여 설치할 수 있습니다.

npm install redux-thunk

2. Redux Thunk 설정하기

Redux Thunk를 사용하기 위해 Redux 스토어를 설정해야 합니다. 이를 위해 createStore 함수를 사용합니다.

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

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

위 예제에서 rootReducer는 애플리케이션의 루트 리듀서입니다.

3. 캐시 제어 로직 구현하기

Redux Thunk를 사용하여 비동기 작업을 처리하고, 그 결과를 캐시로 관리하는 로직을 구현해보겠습니다. 아래는 간단한 예제 코드입니다.

import { fetchUserData } from './api';
import { getUserDataFromCache, setUserDataToCache } from './cache';

export const fetchUser = (userId) => {
  return async (dispatch) => {
    // 캐시에서 유저 데이터 가져오기
    const cachedData = getUserDataFromCache(userId);

    // 캐시에 데이터가 있는 경우, 캐시에서 데이터 반환
    if (cachedData) {
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: cachedData });
      return;
    }

    try {
      // API를 통해 유저 데이터 가져옴
      const userData = await fetchUserData(userId);

      // 데이터를 캐시에 저장
      setUserDataToCache(userId, userData);

      dispatch({ type: 'FETCH_USER_SUCCESS', payload: userData });
    } catch (error) {
      dispatch({ type: 'FETCH_USER_ERROR', payload: error });
    }
  };
};

위 예제에서 fetchUserData는 서버로부터 유저 데이터를 가져오는 API 함수입니다. getUserDataFromCache와 setUserDataToCache는 캐시를 조작하는 함수입니다.

4. Redux 액션 디스패치하기

위에서 구현한 fetchUser 액션 크리에이터 함수를 이용하여 Redux 액션을 디스패치할 수 있습니다. 예제 코드는 다음과 같습니다.

import React from 'react';
import { useDispatch } from 'react-redux';
import { fetchUser } from './actions';

const UserProfile = ({ userId }) => {
  const dispatch = useDispatch();

  const handleButtonClick = () => {
    dispatch(fetchUser(userId));
  };

  return (
    <div>
      <button onClick={handleButtonClick}>유저 정보 가져오기</button>
    </div>
  );
};

위 예제에서 fetchUser 액션 크리에이터 함수를 dispatch 함수와 함께 사용하여 유저 정보를 가져오도록 구현했습니다.

마무리

이번 글에서는 Redux Thunk를 사용하여 캐시 제어 로직을 구현하는 예제를 소개했습니다. Redux Thunk를 활용하면 비동기 작업과 캐싱을 효율적으로 처리할 수 있습니다.

더 자세한 내용은 Redux Thunk 공식 문서를 참고하시기 바랍니다.

#redux #reduxthunk