Redux 마스터(4): 비동기 처리와 Redux 미들웨어

비동기 처리와 Redux 미들웨어

이번 강의에서는 비동기 작업을 처리하기 위한 Redux 미들웨어의 개념을 다룹니다. Redux는 기본적으로 동기적인 작업에 초점을 맞추지만, 실제 애플리케이션에서는 비동기적인 작업이 필수적입니다. 여기서는 Redux에서 비동기 작업을 처리하는 가장 일반적인 방식인 Redux Thunk를 사용하여 API 호출과 같은 비동기 작업을 어떻게 처리하는지 배울 것입니다.

Redux Thunk 를 사용하여 API 호출

1. Redux 미들웨어란?

Redux에서 미들웨어는 액션이 리듀서에 도달하기 전에 추가적인 작업을 할 수 있게 해주는 기능입니다. Redux Thunk는 비동기 작업을 처리할 수 있는 가장 대표적인 미들웨어로, 액션 대신 함수를 디스패치할 수 있도록 해줍니다.

• 동기 작업: 리듀서가 즉시 상태를 업데이트하는 작업.
• 비동기 작업: 시간이 걸리는 작업(API 호출, 파일 로드 등)으로, 이 작업이 완료되기 전에는 상태 업데이트가 지연됨.

2. Redux Thunk 설치 및 설정

우선, Redux Thunk를 프로젝트에 설치하고 설정하는 방법을 알아보겠습니다.

설치

npm install redux-thunk

 

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;

 

이 코드는 thunk 미들웨어를 Redux 스토어에 적용하는 예시입니다.

3. 비동기 작업 처리 예시 (API 호출)

비동기 작업을 처리하기 위한 대표적인 예로 API 호출을 다뤄보겠습니다. 이 예시에서는 JSONPlaceholder에서 데이터를 받아와 상태에 저장하는 작업을 구현합니다.

1. Action 생성

비동기 작업을 처리하기 위한 액션을 함수로 작성합니다. 이 함수는 dispatch를 인수로 받아 API 호출 후 상태를 업데이트하는 작업을 수행합니다.

// actions.js
export const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch((error) => {
        dispatch({ type: 'FETCH_DATA_FAILURE', error });
      });
  };
};

 

1. Reducer 설정

비동기 작업의 상태에 따라 loading, data, error를 관리하는 리듀서를 작성합니다.

// reducer.js
const initialState = {
  loading: false,
  data: [],
  error: null,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true, error: null };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

export default dataReducer;

 

1. Component에서 데이터 가져오기

컴포넌트에서 useDispatch와 useSelector를 사용해 데이터를 가져오는 비동기 작업을 실행하고, 그 결과를 화면에 표시합니다.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const DataFetcher = () => {
  const dispatch = useDispatch();
  const { loading, data, error } = useSelector((state) => state.data);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetcher;

 

4. 주요 개념 정리

• Thunk 미들웨어: 비동기 액션을 처리할 수 있도록 해주는 미들웨어.
• 비동기 작업 처리 순서:
  • dispatch({ type: 'FETCH_DATA_REQUEST' })로 요청 시작.
  • API 호출이 완료되면 FETCH_DATA_SUCCESS 액션을 디스패치해 데이터를 업데이트.
  • 오류가 발생하면 FETCH_DATA_FAILURE 액션을 디스패치해 에러를 상태에 저장.

5. 장점과 단점

장점:

• 비동기 작업을 액션 함수에서 쉽게 처리할 수 있음.
• 액션을 디스패치하는 흐름에 유연성을 제공.

단점:

• 비동기 로직이 액션 내에 있어, 코드가 복잡해질 수 있음.
• 비동기 처리 로직이 많아질수록 유지보수가 어려울 수 있음.

결론

이 강의를 통해 Redux Thunk를 사용한 비동기 작업 처리를 학습했습니다. 실제 프로젝트에서 API 호출과 같은 비동기 작업이 자주 사용되므로, Redux 미들웨어를 활용해 효율적으로 상태를 관리하는 방법을 익히는 것이 중요합니다.