[Redux] 리덕스의 state, action, reducer

단방향 데이터 흐름

• view는 action(이벤트; 앱에서 일어난 사건)를 트리거(by dispatch)하여 액션을 state에 전달한다
  • dispatch는 이벤트 트리거다
• state는 reducer(이벤트 리스너; 관심 있는 사건(action type)에만 응답함)를 이용해 새로운 상태를 만든다
  • state는 프리젠테이션 관심사가 아닌 애플리케이션 별로 고유한 (전역) 상태이다.
• state가 변경되면 view가 업데이트 된다.
  • selector로 view 트리 외부에 존재하는 전역 상태 트리(state)를 연결한다.

one way data flow

왜 Reducer인가

Array.reduce()는 배열안에 있는 값을 단일 값으로 축소(reduce)한다.

Redux Reducer는 시간 순서대로 발생하는 일련의 액션을 단일 값으로 축소(reduce)한다.

const actions = [
  { type: 'counter/increment' },
  { type: 'counter/increment' },
  { type: 'counter/increment' }
]

const initialState = { value: 0 }

// (s,a) => s
const finalResult = actions.reduce(counterReducer, initialState)

Array.reduce()는 한 번 실행하면 끝나지만,

Redux의  reduce는 실행 중인 앱의 수명 동안 발생한다는 것이 차이점이다.

요약

• Redux는 글로벌 애플리케이션 상태를 관리하기 위한 라이브러리다.
• Redux는 "단방향 데이터 흐름" 앱 구조를 사용한다.
• state는 특정 시점의 앱 상태를 설명하고 UI는 해당 상태를 기반으로 렌더링된다.
• action은 type 필드가 있는 일반적인 객체로, 앱에서 발생한 사건을 의미한다.
• reducer는 이전 상태 + 작업을 기반으로 새로운 상태 값을 계산하는 함수다
• 앱에서 이벤트(액션)가 발생함은 다음을 의미한다.
  • UI(view)가 action을 디스패치(스토어에 이벤트를  전달)한다.
  • store는 reducer(이벤트 리스너)를 실행해 action(event)에 응답하고, 응답으로 상태를 업데이트한다.
  • store는 상태가 변경되었음을 UI(view)에 알린다
    • Redux 스토어는 액션이 ​​전달될 때마다 루트 리듀서를 실행한다.

참고

https://redux.js.org/tutorials/essentials/part-1-overview-concepts