1. 🔎 ۪ 리덕스(Redux)란?

: 애플리케이션에서 정교한 상태 관리를 구현하는데 도움이 되는 라이브러리

2. ✏️ ۪ 이건 알고 넘어가야겠다..

❗️ ۪ 주의점

1. Single source of truth

동일한 데이터는 항상 같은곳에서 가져온다.
(데이터를 저장하는 스토어라는 하나뿐인 공간이 있다.)

2. State is read-only

상태 값은 불변 객체이다.

• 객채는 Object.assign(), spread operator 로 객체를 복사하여 사용
• 배열은 concat, filter, map, slice 로 불변성을 유지할 수 있다.
  (push, splice, reverse 는 사용하지 않는다. ) 액션 객체를 통해 변경해야 한다.

  const incrementAction = {
   type: 'INCREMENT',
   amount: 10,
  };

store.dispatch(incrementAction)

1 ) 액션 객체는 type 속성이 존재한다.
2 ) type 속성이 아닌 것들은 상태 값을 수정하기 위한 정보이다.
3 ) 액션객체와 dispatch 메소드를 호출해야 상태 값이 변한다.

### 3. Changes are made with pure functions
변경은 순수함수로만 가능하다.

상태 값을 변경하는 리듀서(reducer) 함수를 사용해야 한다.
- 동일 input? then 동일 output

```js
(state, action) => nextState

리듀서:두가지 파라미터를 받아오며, 현재의 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어 반환한다.

👍 ۪ 장점

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

2. 유지보수가 더욱 편리하다.

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

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

즉 리덕스는 부모에서 자식, 자식의 자식으로 상태 값을 전달하며 관리할 필요 없다.

---

3. 🧩 ۪ 리덕스 주요개념

📌 ۪ 스토어 : 상태가 관리되는 오직 하나의 공간

ㄴ 현재 앱의 상태, 리듀서, 추가적인 내장 함수가 존재한다.
ㄴ 하나의 애플리케이션은 하나의 스토어만 만들어야한다.

📌 ۪디스패치: 스토어의 내장함수, 액션을 발생시킨다.

ㄴ 스토어는 리듀서 함수를 실행시켜, 해당 액션을 처리, 새로운 상태를 만든다.

dispatch(action)

📌 ۪구독: 스토어의 내장함수, 전달 받았던 함수 호출

ㄴ 상태가 업데이트 할 때마다 전달 받은 함수를 호출한다.

📌 ۪액션 : 스토어에 애플리케이션 데이터를 운반준다.

ㄴ 디스패치로 액션을 발생시킨다.

dispatch(action)

ㄴ 타입은 필수 값이며, 나머지 값들을 필요에 따라 넣어야한다.

const incrementAction = {
  type: 'INCREMENT',
  amount: 10,
};

📌 ۪리듀서 : 변화를 만들어내는 함수

ㄴ 스테이트와, 액션에 의존해서 작동해야한다.
ㄴ액션과 연결됨, 운반과정에 리듀서를 거쳐서 가야함

---

4. 🖇 ۪ 흐름 정리

✔️ ۪ 리덕스를 프로젝트에 적용하면 스토어라는 녀석이 생기고,

✔️ ۪ 각각의 컴포넌트는 스토어를 구독할 수 있다.

✔️ ۪ dispatch(action)을 통해 상태를 업데이트 한다(정해진 type에 따라)

✔️ ۪ 액션 객체를 받으면 액션의 타입에 따라 어떻게 상태를 업데이트 해줘야 할지 결정해야하고,

✔️ ۪ 이러한 업데이트 로직을 정의하는 함수를 리듀서라 한다.

✔️ ۪ 상태가 변하면 구독하고 있던 컴포넌트에 친절히 알려준다.