[flutter] Redux Middleware의 주요 기능은 무엇인가요?

03 Nov 2023

flutter

Redux Middleware는 Redux 앱의 핵심 기능 중 하나로, 액션과 리듀서 사이의 중간 단계로 동작합니다. Middleware는 액션이 디스패치되면 이를 가로채서 추가적인 로직을 수행하거나 변경할 수 있는 기능을 제공합니다.

Redux Middleware의 주요 기능은 다음과 같습니다:

액션 로깅(Logging): Middleware는 디스패치되는 액션을 캡처하고 로그에 출력하는 기능을 제공합니다. 이를 통해 개발자는 디버깅을 용이하게 할 수 있고, 앱의 상태 변화를 추적할 수 있습니다.

예시:

void loggingMiddleware(Store<AppState> store, action, NextDispatcher next) {
  print('Dispatching action: $action');
  next(action);
}

비동기 작업 처리(Asynchronous processing): Redux는 기본적으로 동기적인 작업을 처리하는 방식이지만, Middleware를 사용하면 비동기 작업을 처리할 수 있습니다. 비동기 작업은 외부 데이터 소스에서 데이터를 가져오거나 API 호출 등의 작업에 사용될 수 있습니다.

예시:

void apiMiddleware(Store<AppState> store, action, NextDispatcher next) {
  if (action is FetchDataAction) {
    // 비동기 작업을 시작하고 완료되면 액션을 변경하여 처리 결과를 업데이트합니다.
    fetchData().then((result) {
      store.dispatch(DataLoadedAction(result));
    });
  }
  // 다음 미들웨어나 리듀서에게 액션을 전달합니다.
  next(action);
}

액션 변형(Transforming actions): Middleware는 액션을 가로채어 변경하거나 조작할 수 있습니다. 이를 통해 액션의 형태나 내용을 기반으로 다른 액션이 디스패치되도록 만들거나, 특정 조건에 따라 액션을 건너뛸 수 있습니다.

예시:

void validationMiddleware(Store<AppState> store, action, NextDispatcher next) {
  if (action is UpdateUserDataAction) {
    if (action.name.isEmpty) {
      // 이름이 비어있으면 액션을 건너뜁니다.
      return;
    }
    // 이름이 비어있지 않으면 액션을 변경하여 dispatch합니다.
    store.dispatch(UpdateUserDataAction(action.name.trim()));
  }
  next(action);
}

Redux Middleware는 애플리케이션의 상태 관리를 더욱 유연하게 만들어줍니다. 액션의 로깅, 비동기 작업 처리, 액션의 변형 등 다양한 기능을 통해 앱의 동작을 쉽게 커스터마이즈할 수 있습니다.

추가 참고 자료: