Redux Thunk를 활용한 테이블 필터링 구현 방법

18 Oct 2023

redux

이번 블로그 포스트에서는 Redux Thunk를 활용하여 테이블 필터링을 간편하게 구현하는 방법을 알아보겠습니다. Redux Thunk는 Redux 미들웨어 중 하나로, 비동기 작업을 처리할 수 있도록 도와줍니다.

필요한 패키지 설치 및 설정

먼저, Redux Thunk를 활용하기 위해 필요한 패키지를 설치해야 합니다.

npm install redux-thunk

다음으로, Redux Store를 설정할 때 Thunk 미들웨어를 적용해야 합니다. redux-thunk 패키지에서 가져온 thunk 미들웨어를 applyMiddleware 함수에 넣어 Redux Store에 적용합니다.

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

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

액션과 액션 크리에이터 생성

테이블 필터링을 구현하기 위해서는 필터링에 필요한 액션과 액션 크리에이터를 생성해야 합니다. 예를 들어, “SET_FILTER”라는 액션을 생성하고, 이 액션에서는 테이블에 적용할 필터링 값을 전달합니다.

// 액션 타입 선언
const SET_FILTER = 'SET_FILTER';

// 액션 크리에이터 생성
export const setFilter = (filterValue) => ({
  type: SET_FILTER,
  payload: filterValue,
});

Thunk 액션 생성자 작성

테이블 필터링을 위해 비동기 작업을 처리해야 하는 경우 Thunk 액션 생성자를 작성해야 합니다. Thunk 액션 생성자는 일반적인 액션 크리에이터와는 달리, 함수를 반환합니다. 이 함수에서 비동기 작업을 수행하고 필요한 액션을 디스패치합니다.

// Thunk 액션 생성자 작성
export const filterTable = (filterValue) => {
  return (dispatch, getState) => {
    // 비동기 작업 수행
    // 예시: 서버에서 데이터를 가져와서 필터링하고 결과를 디스패치합니다.
    
    dispatch(setFilter(filterValue));
  };
};

컴포넌트에서 Thunk 액션 디스패치하기

마지막으로, 컴포넌트에서 Thunk 액션을 디스패치해야 합니다. 이를 위해 react-redux 패키지의 connect 함수를 사용하여 컴포넌트를 Redux Store에 연결합니다.

import React from 'react';
import { connect } from 'react-redux';
import { filterTable } from './actions';

const TableFilter = ({ filterTable }) => {
  const handleFilterChange = (event) => {
    const filterValue = event.target.value;
    filterTable(filterValue);
  };

  return (
    <div>
      <input type="text" onChange={handleFilterChange} />
    </div>
  );
};

export default connect(null, { filterTable })(TableFilter);

위의 예시에서는 사용자가 입력한 값을 filterTable 액션에 전달하여 필터링을 처리하고 있습니다. 디스패치된 액션은 Redux Store의 리듀서에 의해 처리됩니다.

결론

Redux Thunk를 활용하면 비동기 작업을 간편하게 처리할 수 있으며, 테이블 필터링과 같은 기능을 쉽게 구현할 수 있습니다. Thunk를 사용하면 액션 생성자에서 비동기 작업을 수행하고 필요한 액션을 디스패치할 수 있습니다.

참고 링크:

Redux 공식 문서 - Thunk 미들웨어