Redux Thunk를 이용한 상태 초기화 로직 예제

18 Oct 2023

redux

React와 Redux를 사용하여 애플리케이션을 개발할 때, 종종 상태 초기화 로직이 필요합니다. 이때 Redux Thunk를 사용하면 비동기 작업을 처리하고 상태를 초기화할 수 있습니다. 이번 글에서는 Redux Thunk를 이용한 상태 초기화 로직의 예제를 살펴보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux 미들웨어 중 하나로, 액션 크리에이터 함수가 일반 객체 액션 대신 함수를 반환할 수 있도록 해줍니다. 이렇게 반환된 함수는 Redux Thunk 미들웨어에 의해 처리되어 비동기 작업을 수행할 수 있습니다.

Redux Thunk를 사용하기 위해서는 redux-thunk 패키지를 설치해야 합니다. 다음과 같은 명령어를 실행하여 패키지를 설치할 수 있습니다:

npm install redux-thunk

상태 초기화 로직 예제

다음은 Redux Thunk를 이용하여 상태 초기화를 수행하는 예제입니다. 예제에서는 사용자 정보를 비동기로 가져온 뒤, 상태를 업데이트하는 과정을 보여줍니다.

// actions.js
import axios from 'axios';

export const fetchUserRequest = () => {
  return {
    type: 'FETCH_USER_REQUEST'
  }
}

export const fetchUserSuccess = (user) => {
  return {
    type: 'FETCH_USER_SUCCESS',
    payload: user
  }
}

export const fetchUserFailure = (error) => {
  return {
    type: 'FETCH_USER_FAILURE',
    payload: error
  }
}

export const fetchUser = () => {
  return (dispatch) => {
    dispatch(fetchUserRequest());
    axios.get('/api/user')
      .then(response => {
        const user = response.data;
        dispatch(fetchUserSuccess(user));
      })
      .catch(error => {
        dispatch(fetchUserFailure(error.message));
      });
  }
}

예제에서는 fetchUserRequest, fetchUserSuccess, fetchUserFailure라는 세 가지 액션 크리에이터 함수를 정의합니다. fetchUser 함수는 비동기 작업을 수행하며, API를 호출하여 사용자 정보를 가져오고 각 상황에 따라 액션을 dispatch합니다.

// reducer.js
const initialState = {
  user: null,
  loading: false,
  error: null
}

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_USER_REQUEST':
      return {
        ...state,
        loading: true,
        error: null
      };
    case 'FETCH_USER_SUCCESS':
      return {
        ...state,
        user: action.payload,
        loading: false,
        error: null
      };
    case 'FETCH_USER_FAILURE':
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
}

export default reducer;

리듀서에서는 초기 상태를 정의하고, 각 액션에 따라 상태를 업데이트합니다. 예제에서는 FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE 액션 타입에 따라 상태를 다르게 처리하며, user 정보, 로딩 상태, 에러 메시지를 관리합니다.

이제, 액션 크리에이터 함수와 리듀서를 사용하여 상태 초기화 로직을 작성할 수 있습니다.

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

const App = () => {
  const dispatch = useDispatch();
  const user = useSelector(state => state.user);
  const loading = useSelector(state => state.loading);
  const error = useSelector(state => state.error);

  useEffect(() => {
    dispatch(fetchUser());
  }, [dispatch]);
  
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      {user ? (
        <div>
          <div>Name: {user.name}</div>
          <div>Email: {user.email}</div>
        </div>
      ) : (
        <div>No user found</div>
      )}
    </div>
  );
}

export default App;

위의 예제에서는 useDispatch와 useSelector 훅을 사용하여 상태를 가져오고, fetchUser 액션을 dispatch합니다. 상태의 로딩 상태와 에러 메시지에 따라 적절한 UI를 렌더링합니다.

마무리

Redux Thunk를 사용하여 상태 초기화 로직을 구현하는 방법에 대해 알아보았습니다. 비동기 작업을 수행하고 액션을 dispatch하여 상태를 업데이트하는 로직을 효과적으로 처리할 수 있습니다. 추가적으로 필요한 기능을 구현하기 위해서는 Redux Thunk의 다양한 활용법을 참고하시기 바랍니다.