리덕스(Redux)란?

- Redux란 JS 상태관리 라이브러리이다.

💡그런데 상태관리도구는 왜 필요한 것일까?

• React에서 State 즉 데이터는 컴포넌트 안에서 관리된다. 자식 컴포넌트 간의 다이렉트 데이터 전달이 불가능한데, 이 떄 부모 컴포넌트를 통해 전달 받을 수 있다.
• 자식 컴포넌트가 많아질수록 상태관리가 매우 복잡해지는데 이를 해결하기 위해 Redux 등의 상태관리 라이브러리들이 탄생한 것이다.

---

Redux의 원칙

1. Single source of truth

• 동일한 데이터는 항상 같은 곳에서 가지고 온다.
• Store라는 하나만의 데이터 공간이 존재한다.

2. State is read-only

• Action이라는 객체를 통해서만 상태를 변경할 수 있다.(ex)useState)

3. Changes are made with pure functions

• 변경은 순수함수로만 가능하다.
• Reducer와 연관되는 개념이다.
• Store - Action - Reducer
  

---

Redux 용어 설명

Store

Store는 상태가 관리되는 하나의 공간이다.(유일)

• 컴포넌트와 별개로 스토어라는 공간에 필요한 상태를 담는다.
• 컴포넌트에서 상태 정보가 필요할 떄 스토어에 접근한다.

Action

• Action은 앱에서 스토어에 운반할 데이터를 의미한다.
• 객체 형식으로 되어있다.

{
  type: 'ACTION_CHANGE_USER', // 필수
  payload: { // 옵션
    address: '서웉륵별시',
    age: 100
  }
}

Reducer

• Action을 Store에 바로 전달하는 것이 아니라 Reducer에 전달해야 한다.
• Reducer가 주문을 보고 Store의 상태를 업데이트 한다.
• Action을 Reducer에 전달하기 위해 dispatch() 메서드를 사용해야 한다.

Dispatch

• Dispatch는 Store의 내장 함수로 Action을 발생시킨다.
• Action을 Parameter로 전달하고 Reducer를 호출한다.

Subscribe

• Subscribe는 Store의 내장 함수로 특정 함수를 전달해주면 Action이 Dispatch 되었을 때마다 전달된 함수가 호출된다.

1. Action 객체가 dispatch() 메서드에 전달
2. dispatch()를 통해 Reducer를 호출
3. Reducer는 새로운 Store를 생성

---

Redux의 장점

1. 순수 함수를 사용하여 상태를 예측 가능하게 한다.
2. 유지보수가 편하다.
3. Redux dev tool이 있어 디버깅에 유리하다.
4. 비동기를 지원하는 Redux Sage, Redux Thunk등 다양한 미들웨어가 존재한다.