Redux

Redux

• Redux : a predictatble state container fo JS apps.(상태 관리 라이브러리)
• 그외: MobX, Recoil.js

1. 상태 관리 라이브러리는 왜 필요한가?

항상 변하는 상태를 관리하기란 어렵습니다. 모델이 다른 모델을 업데이트하고, 그리고 뷰가 모델을 업데이트 할 수 있고, 이 뷰가 다시 다른 모델을 업데이트하고, 이에 따라 또 다른 뷰가 업데이트 됩니다. 어느 시점에서는 프로그래머조차 애플리케이션에서 무슨 일이 일어나는지 알 수 없게 됩니다. 상태를 언제, 왜, 어떻게 업데이트할지 제어할 수 없는 지경에 이르고 맙니다.
...
Redux는 상태 변화가 일어나는 시점에 제약을 두어, 상태 변화를 예측 가능하게 만들고자 시도한다.

2. Props vs State

1. Props

<ChatMessages
    messages={messages}
    currentMember={member}
/>

• 부모->자식 컴포넌트한테 전달하는 데이터로, 위~아래로만 흐르며 부모가 1이라는 값을 자식에게 전달하면 그 1이라는 것 변하지 않는다.(immutable)
• 그래서 부모에서 자식은 찾을 수 있어도 자식에서 부모를 찾을 수 없다.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

let sum = (a,b) => a+b;
// 입력값을 바꾸지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수를 순수함수.

let withdraw = (account,amount) => account.total -= amount;
// 반면 위의 함수는 자신의 입력값을 변경하기 때문에 순수함수가 아니다.

3. State

state = {
  message: '',
  attachFile: undefined,
  openMenu: false
};

• 컴포넌트 안에서 데이터를 교환할 때 사용한다.
• mutable이기에 state 안에서 값이 변할 수 있고 변할 경우엔 Re-Render됨.
• 이러한 state를 관리하는 게 redux

4. Redux

• React component->Store간의 직접적인 처리가 아니라
• React component->Action->Reducer->Store->React component 이렇게 우회적으로 한방향으로 처리
  ->Action: Store에 새로운 state정보를 추가하거나 기존 state를 변경하는 일은 무엇이 변경된 지 기술하는 것.
  

  {type: 'LIKE_ARTICLE', articleId: 42}
  {type: 'FETCH_USER_SUCCESS', response: {id: 3, name:'Mary'}}
  {type: 'ADD_TODO', text:'Read the Redux docs'}

  ㄱ article의id 42번이 좋아요 라는 버튼을 눌렀다는 메시지
  ㄴ id가 3번이고 이름이 mary인 유저정보를 가져오는 것을 성공했다는 메시지
  ㄷ 이 text를 TODO 리스트에 추가했다라는 메시지
  
->Reducer: Action의 결과로 최종 state를 결정해서 리턴함.
```js
(previousState, action) => nextState

• 우회적으로 처리하는 이유
  ㄱ App의 상태를 쉽게 저장하고 예측 가능하게 관리해 주기 위한 확장성 때문.
  ㄴ App의 모든 state는 한 장소에 Store.
• state는 읽기 전용이고 Action을 통해서만 변경
• Reducer를 이용해 마지막 state값을 지정함.

Redux의 3가지 원칙

• 애플리케이션의 모든 상태(state)는 하나의 저장소(store) 안에 하나의 객체 트리 구조로 저장된다.
  • 서버로부터 가져온 상태는 직렬화(serialized)되거나, 수화되어(hydrated) 전달되며 클라이언트에서 추가적인 코딩 없이도 사용할 수 있다. 하나의 상태 트리만을 가지고 있기 때문에 디버깅에도 용이
• 상태(state)는 읽기 전용(read-only)이다.
  • 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐
• 변화는 순수 함수로 작성되어야 한다.
  • 액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 reducer를 작성해야 한다.
    -> reducer는 그저 이전 상태와 액션을 받아 다음 상태를 반환하는 순수함수이다. 이전 상태를 변경하는 것이 아니라, 새로운 상태 객체를 생성해서 반환해야한다는 사실을 기억해야 한다.