Redux Thunk를 활용한 데이터 소트 및 필터링 방법

18 Oct 2023

redux

데이터 관리는 모던 웹 애플리케이션 개발에서 매우 중요한 부분입니다. Redux를 사용하면 상태(state)를 효율적으로 관리할 수 있고, Redux Thunk를 이용하면 비동기 작업을 처리할 수 있습니다. 이번 글에서는 Redux Thunk를 활용하여 데이터 소트 및 필터링을 어떻게 구현할 수 있는지 알아보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어로써 비동기 작업을 처리하기 위해 사용됩니다. Redux Thunk는 액션 객체 대신 함수를 디스패치할 수 있도록 해주는 역할을 합니다. 이를 통해 비동기 작업이 필요한 상황에서 액션을 디스패치하고 API 호출, 데이터 가공 등을 처리할 수 있습니다.

데이터 소트 및 필터링 구현 방법

필터링 구현하기

먼저, 데이터를 필터링하는 로직을 구현해보겠습니다. 필터링은 사용자가 특정 조건에 맞는 데이터만 보고 싶을 때 사용됩니다.

import { FILTER_DATA } from './actionTypes';

export const filterData = (filterValue) => {
  return (dispatch, getState) => {
    const state = getState();
    const filteredData = state.data.filter(data => data.value === filterValue);

    dispatch({ type: FILTER_DATA, payload: filteredData });
  };
};

위 코드에서는 filterData라는 액션 생성자 함수를 정의하고, 해당 함수에서 getState 메소드를 통해 현재 상태를 가져옵니다. 이후 filterValue를 기준으로 데이터를 필터링하고, 필터링된 데이터를 FILTER_DATA 액션의 payload로 디스패치합니다.

소트 구현하기

다음은 데이터를 소트하는 로직을 구현해보겠습니다. 소트는 데이터를 특정 기준에 따라 정렬할 때 사용됩니다.

import { SORT_DATA } from './actionTypes';

export const sortData = () => {
  return (dispatch, getState) => {
    const state = getState();
    const sortedData = [...state.data].sort((a, b) => a.value - b.value);

    dispatch({ type: SORT_DATA, payload: sortedData });
  };
};

위 코드에서는 sortData라는 액션 생성자 함수를 정의하고, 해당 함수에서 getState 메소드를 통해 현재 상태를 가져옵니다. 이후 value를 기준으로 데이터를 소트하고, 소트된 데이터를 SORT_DATA 액션의 payload로 디스패치합니다.

적용하기

위에서 구현한 필터링과 소트 로직을 적용하는 방법은 간단합니다. 컴포넌트에서 해당 액션을 디스패치하기만 하면 됩니다.

import React from 'react';
import { useDispatch } from 'react-redux';

import { filterData, sortData } from './actions';

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

  const handleFilter = (filterValue) => {
    dispatch(filterData(filterValue));
  };

  const handleSort = () => {
    dispatch(sortData());
  };

  return (
    <div>
      <button onClick={() => handleFilter('someFilterValue')}>
        필터링
      </button>
      <button onClick={handleSort}>
        소트
      </button>
    </div>
  );
};

export default MyComponent;

위 코드에서는 react-redux의 useDispatch 훅을 이용하여 디스패치 함수를 가져온 후, 필터링 버튼과 소트 버튼을 클릭하면 각각 filterData와 sortData 액션을 디스패치하는 방법을 보여줍니다.

이와 같이 Redux Thunk를 활용하여 데이터의 소트 및 필터링을 구현할 수 있습니다. Redux Thunk를 사용하면 비동기 작업을 쉽게 처리할 수 있으며, 애플리케이션의 상태를 효율적으로 관리할 수 있습니다.