미들웨어란❓

리덕스(또는 다른 상태 관리 라이브러리)에서 액션이 디스패치(dispatch)되어서 리듀서에 도달하기 전에 가로채고 처리하는 함수로 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있다.. 미들웨어는 액션과 상태 사이에서 동작하여 액션을 로깅하거나, 비동기 작업을 처리하거나, 특정 조건에 따라 액션을 수정하는 등의 기능을 추가적으로 수행할 수 있습니다.

필요한 이유?

• 비동기 작업 처리: 네트워크 요청이나 데이터베이스 접근과 같은 비동기 작업을 처리할 수 있습니다. Redux에서는 기본적으로 동기적으로 작동하므로, 미들웨어를 사용하여 비동기 작업을 처리할 수 있게 됩니다.

• 로깅: 액션을 디스패치할 때 미들웨어를 이용하여 액션의 정보를 로그에 남기는 등의 로깅 작업을 할 수 있습니다.

• 예외 처리: 액션이나 상태 처리 중에 발생하는 예외를 캐치하여 처리할 수 있습니다.

• 암호화 및 보안: 액션의 내용을 암호화하거나 보안을 강화하는 등의 작업을 할 수 있습니다.

사용하는 법

Redux 미들웨어를 사용하려면 applyMiddleware 함수를 사용하여 미들웨어를 스토어에 등록해주어야 합니다. 미들웨어는 createStore 함수의 세 번째 매개변수로 전달되어야 합니다.

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk'; // 예시로 redux-thunk 미들웨어를 사용

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

🧐 대표적인 redux middleware

1. Redux Thunk

: 가장 널리 사용되는 Redux 미들웨어 중 하나입니다. 비동기 작업을 처리하기 위해 사용됩니다. Redux Thunk를 사용하면 액션 생성자 함수에서 일반 객체 대신 함수를 반환할 수 있습니다. 이 함수는 Redux 스토어의 dispatch 메서드를 사용하여 다른 액션을 디스패치하거나 비동기 작업을 수행할 수 있습니다. 주로 네트워크 요청과 같은 비동기 작업을 처리할 때 유용합니다.

2. Redux Saga

: Redux 애플리케이션에서 비동기 작업을 처리하기 위한 미들웨어로, Generator 함수를 기반으로 동작합니다. Redux Saga는 액션을 모니터링하고, 특정 액션이 발생했을 때 사가(Saga) 함수를 실행하여 비동기 작업을 처리합니다. Redux Saga를 사용하면 비동기 작업의 흐름을 관리하기 쉽고, 복잡한 비동기 로직을 보다 간결하고 유지보수하기 쉽게 구현할 수 있습니다.

3. Redux Logger

: 개발 시 디버깅을 도와주는 미들웨어로, Redux의 액션과 상태에 대한 정보를 콘솔에 로깅합니다. 액션 디스패치 시점, 액션의 타입, 액션의 페이로드, 상태의 변화 등을 쉽게 추적하고 분석할 수 있습니다. 주로 개발 환경에서 사용되며, 배포할 때는 비활성화하여 성능에 영향을 미치지 않도록 합니다.

4. Redux Promise Middleware

: 비동기 작업을 처리하기 위한 미들웨어로, Redux Thunk와 유사한 방식으로 액션 생성자 함수에서 프로미스(Promise)를 반환하여 비동기 작업을 처리합니다. 프로미스가 완료될 때까지 액션을 대기하고, 프로미스가 성공하면 성공 액션을 디스패치하고, 실패하면 실패 액션을 디스패치합니다. Redux Thunk와 비교하여 간단한 사용법을 제공합니다.

5. Redux Persist

: 애플리케이션의 상태를 로컬 스토리지 또는 장치에 저장하는 미들웨어로, 새로고침이나 앱을 종료해도 상태가 유지되도록 합니다. 주로 사용자가 로그인 상태를 유지하거나, 앱의 설정과 같은 상태를 지속적으로 관리하는 데 사용됩니다.

이 외에도 많은 Redux 미들웨어들이 있으며, Redux 개발자들이 필요에 따라 커스텀 미들웨어를 작성하여 사용할 수도 있습니다. Redux 미들웨어는 Redux의 확장성과 유연성을 높여주는 중요한 기능이며, 다양한 비동기 작업과 기능들을 효율적으로 관리하는 데 도움을 줍니다.

---

📌 Redux-Logger 사용법❓

1. 미들웨어 등록

import { createStore, applyMiddleware } from 'redux';
import loggerMiddleware from 'redux-logger'; // redux-logger 미들웨어 임포트
import rootReducer from './reducers'; // 리듀서 파일 임포트

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

2. 콘솔 로그 출력 설정

: 기본적으로 Redux Logger는 모든 액션에 대한 로그를 출력합니다. 하지만 필요에 따라 로그 출력을 조절할 수 있습니다.

• 모든 로그 출력: loggerMiddleware를 등록하면 모든 액션에 대한 로그가 출력됩니다.

• 지정한 액션만 로그 출력: 특정 액션에 대해서만 로그를 출력하려면 predicate 옵션을 설정합니다.

import { createStore, applyMiddleware } from 'redux';
import loggerMiddleware from 'redux-logger'; // redux-logger 미들웨어 임포트
import rootReducer from './reducers'; // 리듀서 파일 임포트

const loggerOptions = {
  predicate: (getState, action) => action.type === 'SOME_ACTION_TYPE',
};

const store = createStore(rootReducer, applyMiddleware(loggerMiddleware(loggerOptions)));

3. 프로덕션(production) 환경에서 비활성화

개발 환경에서는 Redux Logger를 사용하여 디버깅을 용이하게 하지만, 프로덕션 환경에서는 성능에 영향을 미치지 않도록 비활성화하는 것이 좋습니다. 이를 위해서는 process.env.NODE_ENV를 검사하여 Redux Logger를 적용할지 말지를 결정합니다.

import { createStore, applyMiddleware } from 'redux';
import loggerMiddleware from 'redux-logger'; // redux-logger 미들웨어 임포트
import rootReducer from './reducers'; // 리듀서 파일 임포트

const middlewares = []; // 미들웨어 배열 선언
// const middlewares = [thunkMiddleware, loggerMiddleware]; 

// 'development'인 경우에만 Redux Logger를 등록
if (process.env.NODE_ENV === 'development') {
  middlewares.push(loggerMiddleware);
}

const store = createStore(rootReducer, applyMiddleware(...middlewares));

4. Logger를 만들어서 Redux 미들웨어 작동 방식 이해하기

const loggerMiddleware = store => next => action => {
  console.group(action && action.type); // 액션 타입을 그룹명으로 설정
  console.log('이전 상태', store.getState()); // 이전 상태 로깅
  console.log('액션', action); // 디스패치된 액션 로깅

  // 다음 미들웨어(또는 리듀서)에게 액션을 전달
  next(action);

  console.log('다음 상태', store.getState()); // 액션 처리 후의 상태 로깅
  console.groupEnd(); // 그룹 끝
};

export default loggerMiddleware;

첫 번째 함수 (loggerMiddleware): 이 함수는 스토어 객체를 매개변수로 받습니다. 다음 함수를 반환하고 있습니다.

두 번째 함수 (next): 이 함수는 다음 미들웨어(또는 리듀서)를 가리키는 함수를 매개변수로 받습니다.

세 번째 함수 (action): 이 함수는 디스패치된 액션 객체를 매개변수로 받습니다. 여기서 실제 Logger 미들웨어의 로직이 실행됩니다. 액션을 콘솔에 출력한 후, 다음 미들웨어(또는 리듀서)에 액션을 전달하고, 처리된 상태를 콘솔에 출력한 후 마지막으로 다음 미들웨어(또는 리듀서)의 결과를 반환합니다.

📌 redux-thunk 사용법❓

• redux-thunk는 가장 간단하고 쉽게 사용할 수 있는 리덕스 미들웨어입니다.
  액션 크리에이터(Action Creator)에서 일반적인 객체 대신 함수를 반환할 수 있게 해줍니다. 이 함수는 디스패치(dispatch) 메서드를 인자로 받고, 해당 함수 내에서 비동기 작업을 수행하거나 조건에 따라 다른 액션을 디스패치할 수 있습니다.

• redux-thunk를 사용하면 액션을 통해 비동기 작업을 시작하고, 비동기 작업이 완료되면 해당 결과를 다시 액션으로 디스패치하여 상태를 업데이트합니다.