Redux Thunk를 활용한 키워드 검색 기능 추가 방법

18 Oct 2023

redux

이번 블로그 포스트에서는 Redux Thunk를 활용하여 키워드 검색 기능을 Redux 애플리케이션에 추가하는 방법에 대해 알아보겠습니다. Redux Thunk는 비동기 작업을 처리하고 Redux 스토어와 함께 상태를 관리하는 미들웨어입니다.

1. Redux Thunk 설치하기

먼저 Redux Thunk를 설치해야합니다. 설치하려면 프로젝트 디렉토리에서 다음 명령을 실행하십시오:

npm install redux-thunk

2. Redux Thunk 설정하기

Redux Thunk를 Redux 스토어에 추가하기 위해 applyMiddleware 함수를 사용해야합니다. 메인 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;

3. 검색 액션 생성자 생성하기

키워드 검색을 위해 액션 생성자를 생성해야합니다. 액션 생성자는 데이터를 요청하고 응답을 처리하는 역할을합니다.

export const searchKeyword = (keyword) => {
  return async (dispatch) => {
    try {
      // 검색 요청 전에 로딩 상태를 설정
      dispatch({ type: 'SEARCH_LOADING' });

      // API 호출 및 응답 데이터 처리
      const response = await fetch(`https://api.example.com/search?keyword=${keyword}`);
      const data = await response.json();

      // 검색 결과를 스토어에 저장
      dispatch({ type: 'SEARCH_SUCCESS', payload: data });
    } catch (error) {
      // 에러 발생시 에러 상태를 스토어에 저장
      dispatch({ type: 'SEARCH_ERROR', payload: error.message });
    }
  };
};

4. 컴포넌트에서 검색 액션 호출하기

키워드 검색을 실행하려는 컴포넌트에서 Redux 스토어의 액션을 호출하여 검색을 시작할 수 있습니다. 이를 위해 redux와 react-redux를 컴포넌트에 연결해주어야합니다.

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { searchKeyword } from '../actions/searchActions';

const SearchForm = ({ searchKeyword }) => {
  const [keyword, setKeyword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    searchKeyword(keyword);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <button type="submit">Search</button>
    </form>
  );
};

export default connect(null, { searchKeyword })(SearchForm);

마무리

이제 Redux Thunk를 활용하여 키워드 검색 기능을 Redux 애플리케이션에 추가하는 방법을 알아보았습니다. Redux Thunk를 사용하면 비동기 작업을 손쉽게 관리하고 Redux 스토어의 상태를 업데이트 할 수 있습니다.

더 많은 Redux Thunk 사용법과 예제는 공식 Redux Thunk 문서를 참조하십시오.

#redux #redux-thunk