Redux Thunk를 사용한 모달 다이얼로그 구현

18 Oct 2023

redux

이번 블로그에서는 Redux Thunk를 사용하여 모달 다이얼로그를 구현하는 방법에 대해 알아보겠습니다.

개요

모달 다이얼로그는 사용자에게 메시지나 알림을 보여주는데 사용되는 일반적인 UI 패턴입니다. Redux Thunk는 Redux 미들웨어로 비동기 작업을 처리하는데 사용됩니다. 이를 활용하여 모달 다이얼로그를 관리하고 상태를 업데이트하는 방법을 알아보겠습니다.

Redux Thunk 설정

먼저 Redux Thunk를 사용하기 위해 Redux 미들웨어로서 활성화해야 합니다. Redux Store를 생성할 때 applyMiddleware 함수를 사용하여 Redux Thunk 미들웨어를 적용합니다.

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';

const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware)
);

액션 생성자와 Thunk 함수

모달 다이얼로그를 관리하기 위해 액션 생성자와 Thunk 함수를 정의해야 합니다. 액션 생성자는 모달 다이얼로그에 대한 액션 객체를 생성하는 함수입니다. Thunk 함수는 비동기 작업을 처리하고, 액션 생성자를 호출하고, 상태를 업데이트하는 함수입니다.

// 액션 생성자
const openModal = (message) => ({
  type: 'OPEN_MODAL',
  payload: message
});

const closeModal = () => ({
  type: 'CLOSE_MODAL'
});

// Thunk 함수
const showModal = (message) => {
  return (dispatch) => {
    dispatch(openModal(message));

    // 일정 시간 후 모달 닫기
    setTimeout(() => {
      dispatch(closeModal());
    }, 3000);
  };
};

리듀서 업데이트

모달 다이얼로그를 관리하기 위해 리듀서를 업데이트해야 합니다. 액션에 따라 상태를 업데이트하는 로직을 추가합니다.

const modalReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'OPEN_MODAL':
      return {
        ...state,
        isOpen: true,
        message: action.payload
      };
    case 'CLOSE_MODAL':
      return {
        ...state,
        isOpen: false,
        message: ''
      };
    default:
      return state;
  }
};

컴포넌트에서 사용하기

모달 다이얼로그를 사용하기 위해 컴포넌트에서 해당 액션을 디스패치 해야 합니다. 예를 들어, 버튼 클릭 이벤트에서 모달 다이얼로그를 열고 닫는 기능을 구현할 수 있습니다.

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

const App = () => {
  const dispatch = useDispatch();
  const isOpen = useSelector(state => state.modal.isOpen);
  const message = useSelector(state => state.modal.message);

  const handleClick = () => {
    dispatch(showModal('Hello, Modal!'));
  };

  return (
    <div>
      <button onClick={handleClick}>Open Modal</button>
      {isOpen && <Modal message={message} />}
    </div>
  );
};

마무리

Redux Thunk를 사용하여 모달 다이얼로그를 구현하는 방법에 대해 알아보았습니다. Redux Thunk를 활용하면 비동기 작업과 상태 업데이트를 하나의 Thunk 함수에서 처리할 수 있으며, 모달 다이얼로그와 같은 UI 컴포넌트를 효율적으로 관리할 수 있습니다.

더 자세한 내용은 Redux 공식 문서를 참고하세요.

#redux #redux-thunk