Redux Thunk를 이용한 비동기 검색 기능 구현하기

18 Oct 2023

redux

이번 블로그에서는 Redux Thunk를 사용하여 비동기 검색 기능을 구현하는 방법에 대해 알아보려 합니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어 중 하나로, 비동기 작업을 처리할 수 있는 확장 기능입니다. Redux는 기본적으로 동기적인 작업만을 처리할 수 있기 때문에, 비동기 작업을 처리하기 위해서는 Redux Thunk를 사용해야 합니다.

비동기 검색 기능 구현하기

1. Redux Thunk 설치하기

먼저 프로젝트에 Redux Thunk를 설치해야 합니다. 아래의 명령어를 통해 설치할 수 있습니다.

npm install redux-thunk

2. 액션 타입 정의하기

검색 과정에서 발생하는 액션들을 위해 액션 타입을 정의해야 합니다. 예를 들어, 검색 시작, 검색 성공, 검색 실패와 같은 액션들을 정의할 수 있습니다.

// actionTypes.js

export const SEARCH_START = "SEARCH_START";
export const SEARCH_SUCCESS = "SEARCH_SUCCESS";
export const SEARCH_FAILURE = "SEARCH_FAILURE";

3. 비동기 액션 크리에이터 정의하기

검색 함수를 호출하고 그 결과에 따라 액션을 생성하는 비동기 액션 크리에이터를 정의해야 합니다. 이때 Redux Thunk를 이용하여 비동기 작업을 처리합니다.

// actions.js

import { SEARCH_START, SEARCH_SUCCESS, SEARCH_FAILURE } from "./actionTypes";
import axios from "axios";

export const search = (query) => {
  return async (dispatch) => {
    dispatch({ type: SEARCH_START });

    try {
      const response = await axios.get(`/api/search?query=${query}`);
      dispatch({ type: SEARCH_SUCCESS, payload: response.data });
    } catch (error) {
      dispatch({ type: SEARCH_FAILURE, payload: error.message });
    }
  };
};

4. 리듀서 구현하기

비동기 액션에 대한 상태 변화를 처리하는 리듀서를 구현해야 합니다. 예를 들어, 검색 결과를 상태에 저장하는 경우에는 다음과 같이 리듀서를 작성합니다.

// reducer.js

import { SEARCH_START, SEARCH_SUCCESS, SEARCH_FAILURE } from "./actionTypes";

const initialState = {
  loading: false,
  results: [],
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SEARCH_START:
      return { ...state, loading: true, error: null };
    case SEARCH_SUCCESS:
      return { ...state, loading: false, results: action.payload };
    case SEARCH_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

export default reducer;

5. 컨테이너 컴포넌트에서 검색 기능 사용하기

마지막으로, 컨테이너 컴포넌트에서 검색 기능을 사용할 수 있도록 구현해야 합니다. 이때 useDispatch 훅을 사용하여 비동기 액션 크리에이터를 호출할 수 있습니다.

// SearchContainer.js

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { search } from "./actions";

const SearchContainer = () => {
  const [query, setQuery] = useState("");
  const dispatch = useDispatch();

  const handleSearch = () => {
    dispatch(search(query));
  };

  return (
    <div>
      <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
      <button onClick={handleSearch}>검색</button>
    </div>
  );
};

export default SearchContainer;

마무리

이제 Redux Thunk를 사용하여 비동기 검색 기능을 구현하는 방법에 대해 알아보았습니다. Redux Thunk를 이용하면 Redux와 함께 비동기 작업을 처리할 수 있어서 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.