A JS library for predictable and maintainable global state management

Reducer

Redux Type

State Type

아래는 Redux의 기본 구조와 작동 과정을 설명한 후, JavaScript 이벤트 루프와의 상호작용 측면에서 Redux가 어떻게 동작하는지 자세히 설명한 내용입니다.

1. Redux 기본 구조 및 데이터 흐름

Redux는 예측 가능한 상태 관리 라이브러리로, 주로 프론트엔드 애플리케이션(특히 React)에서 사용됩니다. Redux의 핵심 개념은 다음과 같습니다:

• Store:
  • 애플리케이션의 단일 상태 트리를 저장하는 객체입니다.
  • 상태(State)는 읽기 전용이며, 오직 액션을 통해서만 변경할 수 있습니다.
• Action:
  • 상태 변경을 설명하는 객체입니다. 보통 type 프로퍼티와 함께, 필요한 추가 데이터를 포함합니다.
  • 예를 들어, { type: "INCREMENT", payload: 1 }과 같이 정의합니다.
• **Reducer:**
  • 이전 상태와 액션을 받아서 새로운 상태를 반환하는 순수 함수입니다. → 여기서 말하는 순수 함수란, pure function 즉, 내부에서 데이터 변환이 이루어지지 않고
  • 여러 리듀서를 결합하여 애플리케이션의 전체 상태를 구성할 수 있습니다.
• Middleware:
  • 액션이 리듀서에 도달하기 전에 가로채서, 로그 출력, 비동기 작업 처리 등 추가적인 처리를 수행할 수 있는 확장 지점입니다.
  • 예를 들어, redux-thunk나 redux-saga가 여기에 해당합니다.

Redux의 데이터 흐름은 단방향입니다. 즉, 액션이 dispatch되면, 리듀서가 이를 처리해 새로운 상태를 만들고, 상태 변경이 구독자들에게 통지됩니다.

→ 구독자들: Subscriber을 의미합니다.

2. Redux와 이벤트 루프의 상호작용

Redux는 기본적으로 동기적으로 동작

• 동기적 처리: Redux의 dispatch() 함수는 액션을 리듀서에 전달하고 새로운 상태를 계산하는 과정을 동기적으로 수행합니다.
  • 예를 들어, store.dispatch({ type: "INCREMENT" }) 호출 후, 상태는 즉시 업데이트되고 모든 구독자에게 전달됩니다.
• 동기적 특성의 장점:
  • 예측 가능하고, 테스트와 디버깅이 쉽습니다.
  • 상태 변경 과정이 순차적으로 이루어지므로, 코드 흐름을 이해하기가 비교적 단순합니다.