Colin's Blog
Redux Thunk를 사용한 로컬 저장소 접근 방법

Redux는 JavaScript 애플리케이션의 상태 관리를 돕는 라이브러리입니다. 그러나 Redux만으로는 비동기 작업을 처리하기가 어렵습니다. 이 때 Redux Thunk를 사용하면 Redux의 액션을 비동기 함수로 감싸서 비동기 작업을 처리할 수 있습니다.

로컬 저장소는 클라이언트 측에서 데이터를 저장하는 데 사용되는 기술입니다. 일반적으로 웹 애플리케이션에서 사용자 설정, 사용자 인증 토큰 등을 저장하는 데 사용됩니다.

Redux Thunk 설치

Redux Thunk를 사용하기 위해서는 Redux와 함께 설치해야 합니다. 다음 명령을 사용하여 Redux Thunk를 설치할 수 있습니다.

npm install redux-thunk

Redux Thunk 설정

Redux Thunk를 사용하려면 먼저 Redux 스토어를 설정해야 합니다. 예를 들어, store.js 파일에 다음과 같이 설정할 수 있습니다.

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

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

export default store;

applyMiddleware 함수에 thunk 미들웨어를 추가하여 Redux Thunk를 활성화합니다.

비동기 작업 처리하기

Redux Thunk를 사용하여 로컬 저장소에 접근하려면 비동기 액션 생성자를 작성해야 합니다. 비동기 액션 생성자는 일반적인 액션 객체 대신에 함수를 반환합니다. 이 함수는 dispatch와 getState를 매개변수로 받아 비동기 작업을 수행할 수 있습니다.

예를 들어, 다음은 로컬 저장소에서 데이터를 가져오는 비동기 액션 생성자입니다.

import { getLocalStorageData } from './api';

export const fetchLocalStorageData = () => {
  return (dispatch, getState) => {
    dispatch({ type: 'FETCH_LOCAL_STORAGE_DATA_REQUEST' });

    // 비동기 작업 수행
    getLocalStorageData()
      .then(data => {
        dispatch({ type: 'FETCH_LOCAL_STORAGE_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_LOCAL_STORAGE_DATA_FAILURE', payload: error });
      });
  };
};

이 예제에서는 getLocalStorageData 함수를 사용하여 로컬 저장소에서 데이터를 가져옵니다. 데이터를 가져오는 동안에는 ‘FETCH_LOCAL_STORAGE_DATA_REQUEST’ 액션을 디스패치하고, 데이터를 가져오는 데 성공하면 ‘FETCH_LOCAL_STORAGE_DATA_SUCCESS’ 액션을 디스패치합니다. 데이터를 가져오는 데 실패하면 ‘FETCH_LOCAL_STORAGE_DATA_FAILURE’ 액션을 디스패치합니다.

액션 디스패치하기

비동기 액션 생성자를 사용하여 액션을 디스패치하는 방법은 일반적인 액션과 동일합니다. 예를 들어, 다음과 같이 connect 함수와 함께 컴포넌트에서 비동기 액션을 디스패치할 수 있습니다.

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchLocalStorageData } from './actions';

const MyComponent = ({ data, fetchLocalStorageData }) => {
  useEffect(() => {
    fetchLocalStorageData();
  }, []);

  return (
    <div>
      {/* 데이터 출력 */}
      {data && data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    data: state.data
  };
};

export default connect(mapStateToProps, { fetchLocalStorageData })(MyComponent);

connect 함수를 사용하여 Redux 스토어의 상태를 컴포넌트의 프로퍼티로 매핑하고, fetchLocalStorageData 함수를 컴포넌트의 프로퍼티로 전달합니다. 그러면 컴포넌트에서 fetchLocalStorageData 함수를 호출하여 비동기 액션을 디스패치할 수 있습니다. useEffect 훅을 사용하여 컴포넌트가 마운트되었을 때 자동으로 데이터를 가져오도록 설정했습니다.

결론

Redux Thunk를 사용하여 비동기 작업을 처리하고 로컬 저장소에 접근하는 방법에 대해 알아보았습니다. Redux Thunk를 사용하면 Redux로 간단하게 비동기 작업을 처리할 수 있습니다.

© 2018 Colin. All rights reserved.