Redux 정의

redux는 자바스크립트앱에서 예측가능한 state container

react에서 state는 component내에서 관리 한다
형제 컴포넌트들 간에 데이터를 주고 받을 때, 부모 컴포넌트를 통해서 주고 받는다

만약 자식이 많아진다면 상태관리가 매우 복잡해 진다

이런 복잡성을 줄이기 위해서 상태를 관리해주는 라이브러리가 Resdux이다

Redux 세가지 원칙

1. Single source of truth
   동일한데이터는 항상 같은 곳에서 데이터를 가지고 온다(data를 저장하는 store라는 하나 뿐인 공간이 있다)
2. State is read-only
   redux에서는 action이라는 객체를 통해서 state를 변경할 수 있다
3. Changes are made with pure functions
   변경은 순수함수로만 가능하다(reducer와 연결)

store -> action -> reducer

Store

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

컴포넌트들과 별개로 Store라는 공간이 있어서 그 Store안에 앱에서 필요한 state를 두고,
컴포넌트들에서 state정보가 필요할때 Store에 접근해서 state의 정보를 가져올 수 있다

Action

Action은 자바스크립트 객체다
그 객체안에 type을 비롯한 다양한 data들이 담긴다

Action은 Store에게 Application data를 운반해주는 역할을 한다

ex)

{
  type: "ORDER",
  drink: {
    menu: "Americano",
    size: "Grande",
    iced: false
  }
}

타입을 지정한 후 정보를 객체안에 담아준다

Reducer

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

Action을 통하여 store에게 date를 전달 하는데,
전달 과정에서 Action은 reducer를 거쳐서 전달 해야한다

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

이런 공식을 따르는 이유는 데이터가 한방향으로 흘러야 하기 때문이다

Redux의 기본 개념 Overview

브라우저에서 + 버튼을 클릭하는 이벤트가 발생하면, Dispatch에 전달인자로 Action객체를 담아서 Reducer로 전달이 된다
Reducer는 액션객체 type에 따라서 다른동작을 수행한다
그 동작의 수행 결과로 새로운 스테이트가 반환이 된다

Redux에서 위의 그림과 같이 연결하는 방법은 2가지가 있다

1. map state to props
2. redux hooks

Redux의 장점

1. 상태를 예측 가능하게 만들어준다
Reducer는 순수함수이기 때뭉네 다음 상태가 어떻게 될지 쉽게 예측할 수 있다

2. 유지보수

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

4. 테스트를 붙이기 쉽다
순수함수를 사용하기 때문에 테스트를 붙이기 쉽다

redux 공식홈페이지
githup TIL redux 정리