Redux

Redux는 JS 앱을 위한 예측 가능한 상태 컨테이너이다.

1. Redux의 세가지 원칙

1. Single source of truth

   애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다.

2. State is read-only

   상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 Action 객체를 전달하는 방법뿐이다.

3. Changes are made with pure functions

   Action에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 Reducer를 작성해야한다.

2. Redux의 작동 방식 도식화

Action객체는 Dispatch에게 전달되고 Dispatch는 Reducer를 호출해서 새로운 State를 생성한다.

최종적으로는 아래 사진과 같은 방식이 되겠다.

3. Redux의 장점

1. 상태를 예측 가능하게 만들어 준다.

2. 유지보수에 용이하다.

3. 디버깅에 유리하다.(Action과 state log 기록 시)

4. 테스트를 붙이기 쉽다.

4. Redux 용어

Store

상태가 관리되는 오직 하나의 공간

Store는 애플리케이션의 상태 트리를 가지고 있는 객체이다.

Reducer 수준에서 결합이 일어나기 때문에 Redux 앱에는 단 하나의 저장소만 있어야 한다.

Action

상태를 변화시키려는 의도를 표현하는 객체

Action은 저장소에 데이터를 넣는 유일한 방법이다.

Action은 어떤 형태의 Action이 행해질지 표시하는 type을 가져야 한다.

type은 상수로 정의되고 다른 모듈에서 import 할수 있다.
문자열은 직렬화될 수 있기 때문에 type으로 Symbol보다는 문자열을 쓰는 것이 좋다.

Reducer

현재 상태와 Action을 이용해 다음 상태를 만들어 냄

Reducer는 누적값과 값을 받아서 새로운 누적값을 반환하는 함수이다.

Redux에서 누적값은 상태 객체이고 누적될 값은 Action이다.
Reducer는 주어진 이전 상태와 Action에서 새로운 상태를 계산하며 반드시 같은 입력이 있으면 같은 출력을 반환하는 순수 함수여야만 한다.

Dispatch

Dispatch 함수는 Action이나 Async Action(비동기 액션)을 받는 함수이다.

Action을 받은 다음 하나나 여러개의 Action을 저장소에 보낼수도 보내지 않을수도 있다.