Redux Thunk를 사용하여 필터링된 데이터 가져오기

18 Oct 2023

redux

Redux Thunk는 Redux 미들웨어의 하나로, 비동기 작업을 처리하고 상태를 업데이트하는 것을 도와줍니다. 이를 통해 필터링된 데이터를 가져와 Redux 상태에 저장하는 방법을 알아보겠습니다.

필요한 패키지 설치하기

먼저 Redux Thunk를 사용하기 위해 다음 명령어를 사용하여 필요한 패키지를 설치해야 합니다.

npm install redux-thunk

Redux Thunk 설정하기

Redux Thunk를 사용하기 위해 Redux Store에 미들웨어를 추가해야 합니다. 다음과 같이 createStore 함수를 호출할 때 두 번째 인자로 applyMiddleware 함수를 사용하여 Redux Thunk 미들웨어를 추가합니다.

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

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

필터링된 데이터 가져오기 작업 생성하기

Redux Thunk를 사용하여 필터링된 데이터를 가져오기 위해서는 먼저 액션 크리에이터 함수를 정의해야 합니다. 이 함수는 비동기 작업을 수행하고 필터링된 데이터를 가져온 후, 해당 데이터를 Redux 상태에 업데이트하는 액션을 리턴합니다.

다음은 필터링된 데이터 가져오기 작업을 생성하는 액션 크리에이터 함수의 예시입니다.

import { fetchFilteredData } from './api'; // 필터링된 데이터를 가져오는 API 함수

export const getFilteredData = (filterParams) => {
  return async (dispatch) => {
    try {
      // 필터링된 데이터 가져오기
      const filteredData = await fetchFilteredData(filterParams);

      // 가져온 데이터를 Redux 상태에 업데이트하는 액션 디스패치
      dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData });

    } catch (error) {
      console.error('Error fetching filtered data:', error);
    }
  };
};

위 예시에서 getFilteredData 함수는 filterParams라는 매개변수를 받아와 필터링된 데이터를 가져오고, 이를 Redux 상태에 업데이트하는 액션을 디스패치합니다.

컴포넌트에서 필터링된 데이터 가져오기 작업 디스패치하기

이제 Redux Thunk를 사용하여 필터링된 데이터를 가져오기 위한 작업을 디스패치하는 방법을 알아보겠습니다. 컴포넌트에서는 Redux의 useDispatch 훅을 사용하여 액션 크리에이터 함수를 디스패치할 수 있습니다.

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { getFilteredData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 필터링된 데이터 가져오기 작업 디스패치하기
    dispatch(getFilteredData({ param1: 'value1', param2: 'value2' }));
  }, []);

  return <div>My component</div>;
};

export default MyComponent;

위 예시에서는 useDispatch 훅을 사용하여 dispatch 함수를 가져온 후, 컴포넌트가 마운트될 때 필터링된 데이터 가져오기 작업을 디스패치합니다.

이제 Redux Thunk를 사용하여 필터링된 데이터를 가져오는 작업을 구현할 준비가 되었습니다. Redux Store에서 Thunk 미들웨어를 추가하고, 필터링된 데이터를 가져오는 액션 크리에이터 함수를 정의해서 사용하면 됩니다.

#redux #redux-thunk