📌 리덕스를 사용하는 이유?
모든 하위 컴포넌트에게 상태를 전달하려면 props를 적어서 하위컴포넌트에 일일히 전달해야 한다
근데 컴포넌트가 무수히 많고 그 안에서 상태까지 변경을 하고 싶다면
위에서 아래로 계속 변경을 해줘야 하는 불편함 이 있는데, 만약 그 사이에 오류라도 생긴다면!?!
ex) 숫자가 → 문자로 변경되는 오류
오류를 찾기 위해서 미친듯이 모든 컴포넌트를 뒤져야 한다
그래서 나온 것이 redux라는 라이브러리!
props를 하기 전 변경할 state를 미리 다 정의해주고 집어 넣는 것이다.
그러고 나면 컴포넌트들은 state를 직접 수정하지 않고 수정해달라고 요청만 하는 것이다.
컴포넌트들은 요청만 할 수 있게 코드를 짜놓는 것이다.
👍🏻 장점
state 관리가 편하다! 관리를 한곳에서 할 수 있다.
- 상태를 예측 가능하게 만들어 준다. : 리덕스는 순수함수이기 때문에 다음상태가 어떻게 될지 쉽게 예측 가능
- 유지보수 용이 : 복잡한 컴포넌트에서 props를 내려줘서 그걸 다 찾아서 해결했어야 했는데 버그가 났을 때 쉽게 수정해서 해결 가능
- 디버깅에 유리하다(action과 state log 기록 시)
- 테스트를 붙이기 쉽다. : 순수함수를 사용하기 때문
👀 리덕스 기본 세가지 원칙
- single source of truth: 동일한 데이터는 항상 같은 곳에서 데이터를 가져 온다 > 데이터를 가져오는 Store
- State is read-only: 리액트에서도 state를 변경하기 위해서는 setState라는 메소드를 활용했다. > Action이라는 메소드를 활용해서 변경 가능
- Changes are made with pure functions: 변경은 순수 함수로만 가능하다. > Reducer
💁🏻♀️ 순수함수의 조건
- 사이드이펙트를 방지할 수 있어야 한다.
- 하나의 기능
- 동일한 인자값이 있으면 동일한 리턴값이 있어야함
🖇 1. Store
상태가 관리되는 오직 하나의 공간. 컴포넌트들과 별개로 store공간이 있어서 그 안에 app에 필요한 state가 저장되어 state에 접근할 수 있다
전역 상태를 담은 공간. state의 정보가 들어있다.
💭 2. Action
순수 JS객체여야 한다. type을 비롯한 다양한 데이터들이 담긴다.
액션은 스토어에게 app의 데이터를 운반해주는 역할이다.
스토어에 저장되어 있는 데이터를 꺼내오는 유일한 방법
액션을 통해서 dispatch 해야한다.
먼저 타입을 꼭 지정해줘야 한다. 메뉴, 사이즈, 아이스여부 같은 정보를 객체 안에 담아준다.
- 🐣 type
state를 어떻게 변화시키는 지를 정의.
- 🐥 payload
함수 실행에 대한 결과이자 부산물이다
함수를 실행한 결과로 payload 객체가 발생하고 그 안에 각각의 프로퍼티가 생긴 것
action의 type에 따라 필요한 state 값을 담고 있다.
어떤 타입의 값이든 가질 수 있다. type과 status를 제외한 액션의 정보는 모두 payload에 있어야 한다.
error가 true라면 Payload는 에러 객체를 가지고 있어야한다
→ 이는 promise가 오류시 오류 객체를 리턴하는 것과 같다
- 🐤 dispatch
store관리자이자 Action을 전달하는 메소드, dispatch의 전달인자로 Action 객체가 전달되고 Reducer를 호출해 state 값을 바꾸는 역할
📎 3. Reducer
Action을 통해서 app의 내용을 store에 운반할 수 있는데, 그 과정에서 reducer를 거쳐서 가야한다.
Store는 현재 state가 있을거고 , 그 현재 상태와 action을 이용해서 새로운 New State를 생성한다.
여기서 dispatch는 action이라는 객체가
-> dispatch라는 메소드에게 전달되고 dispatch가
→ reducer를 호출해서 새로운 state를 생성.
Redux의 원리
- 브라우저에 +클릭하여 ui에 클릭해서 이벤트가 발생
- dispatch의 전달인자로 action객체를 담아서 Reducer로 전달
- Reducer 는 action 객체의 타입에 따라서 다른 동작 수행
- 그 동작의 실행결과로 New State가 반환
