Colin's Blog
Redux Toolkit을 활용한 자바스크립트 앱의 데이터 검색 방법

Redux Toolkit은 Redux 상태 관리를 간소화하고 효율화하기 위한 도구 모음입니다. 자바스크립트 앱에서 Redux Toolkit을 사용하면 데이터 검색과 관련된 작업을 간단하게 처리할 수 있습니다. 이번 블로그 포스트에서는 Redux Toolkit을 활용하여 데이터 검색을 하는 방법에 대해 알아보겠습니다.

1. 액션(Action) 생성하기

데이터 검색을 위해서는 액션을 생성하여 Redux 상태를 업데이트해야 합니다. Redux Toolkit은 createAction 함수를 제공하여 액션을 생성하는 것을 간소화시켰습니다. 아래는 예시 코드입니다.

import { createAction } from '@reduxjs/toolkit';

export const search = createAction('search');

위 코드에서 search는 액션 타입입니다. createAction 함수는 자동으로 해당 액션에 대한 액션 생성자 함수를 생성하므로 따로 작성할 필요가 없습니다.

2. 리듀서(Reducer) 정의하기

액션을 처리하기 위해 리듀서를 정의해야 합니다. Redux Toolkit에서는 createReducer 함수를 사용하여 리듀서를 정의하는 것을 간편하게 할 수 있습니다. 아래는 예시 코드입니다.

import { createReducer } from '@reduxjs/toolkit';

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

export default createReducer(initialState, (builder) => {
  builder
    .addCase(search.pending, (state) => {
      state.loading = true;
    })
    .addCase(search.fulfilled, (state, action) => {
      state.loading = false;
      state.data = action.payload;
    })
    .addCase(search.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
});

위 코드에서 initialState는 초기 상태를 정의한 객체입니다. createReducer 함수는 initialState와 액션 처리에 대한 콜백 함수를 인자로 받습니다. 이 콜백 함수에서는 Redux Toolkit에서 제공하는 addCase 함수를 사용해 각 액션에 대한 상태 업데이트 로직을 작성할 수 있습니다.

3. 비동기 액션 처리하기

데이터 검색은 비동기적으로 처리되어야 합니다. Redux Toolkit은 createAsyncThunk 함수를 제공하여 비동기 액션을 간편하게 처리할 수 있게 해줍니다. 아래는 예시 코드입니다.

import { createAsyncThunk } from '@reduxjs/toolkit';

export const searchAsync = createAsyncThunk('searchAsync', async (query) => {
  const response = await fetchData(query);
  return response.data;
});

위 코드에서 searchAsync는 비동기 액션 타입입니다. createAsyncThunk 함수는 비동기 처리 로직을 인자로 받아 해당 로직을 수행하고, Promise를 반환합니다. 이 반환된 Promise는 액션의 payload로 사용됩니다.

4. 컴포넌트에서 데이터 검색 사용하기

마지막으로, 컴포넌트에서 데이터 검색을 사용할 수 있게 해야 합니다. useSelector 훅을 사용하여 Redux 상태를 읽고, useDispatch 훅을 사용하여 액션을 dispatch할 수 있습니다. 아래는 예시 코드입니다.

import { useSelector, useDispatch } from 'react-redux';
import { searchAsync } from './searchSlice';

function SearchComponent() {
  const data = useSelector((state) => state.search.data);
  const loading = useSelector((state) => state.search.loading);
  const error = useSelector((state) => state.search.error);
  
  const dispatch = useDispatch();
  
  const handleSearch = (query) => {
    dispatch(searchAsync(query));
  };
  
  // 컴포넌트 렌더링 및 이벤트 핸들링 코드
  
  return (
    // JSX 코드
  );
}

위 코드에서 useSelector 훅을 사용하여 필요한 상태 값들을 읽어오고, useDispatch 훅을 사용하여 searchAsync 액션을 dispatch할 수 있습니다. 이후에는 필요한 컴포넌트 렌더링 코드와 이벤트 핸들링 코드를 작성하면 됩니다.

마무리

Redux Toolkit을 활용하면 자바스크립트 앱에서 데이터 검색과 관련된 작업을 간편하게 처리할 수 있습니다. 이번 블로그 포스트에서는 Redux Toolkit을 사용하여 액션 생성, 리듀서 정의, 비동기 액션 처리, 그리고 컴포넌트에서의 사용에 대해 알아보았습니다. 이를 통해 애플리케이션의 상태 관리를 효율적으로 관리할 수 있을 것입니다.

#ReduxToolkit #자바스크립트 #데이터검색 #리덕스

© 2018 Colin. All rights reserved.