Redux리덕스 Reducer 리듀서 이해하기

hams·2022년 6월 29일
3
post-thumbnail

📌 리덕스를 사용하는 이유?

모든 하위 컴포넌트에게 상태를 전달하려면 props를 적어서 하위컴포넌트에 일일히 전달해야 한다
근데 컴포넌트가 무수히 많고 그 안에서 상태까지 변경을 하고 싶다면
위에서 아래로 계속 변경을 해줘야 하는 불편함 이 있는데, 만약 그 사이에 오류라도 생긴다면!?!
ex) 숫자가 → 문자로 변경되는 오류
오류를 찾기 위해서 미친듯이 모든 컴포넌트를 뒤져야 한다
그래서 나온 것이 redux라는 라이브러리!
props를 하기 전 변경할 state를 미리 다 정의해주고 집어 넣는 것이다.
그러고 나면 컴포넌트들은 state를 직접 수정하지 않고 수정해달라고 요청만 하는 것이다.
컴포넌트들은 요청만 할 수 있게 코드를 짜놓는 것이다.

👍🏻 장점

state 관리가 편하다! 관리를 한곳에서 할 수 있다.

  1. 상태를 예측 가능하게 만들어 준다. : 리덕스는 순수함수이기 때문에 다음상태가 어떻게 될지 쉽게 예측 가능
  2. 유지보수 용이 : 복잡한 컴포넌트에서 props를 내려줘서 그걸 다 찾아서 해결했어야 했는데 버그가 났을 때 쉽게 수정해서 해결 가능
  3. 디버깅에 유리하다(action과 state log 기록 시)
  4. 테스트를 붙이기 쉽다. : 순수함수를 사용하기 때문

👀 리덕스 기본 세가지 원칙

  1. single source of truth: 동일한 데이터는 항상 같은 곳에서 데이터를 가져 온다 > 데이터를 가져오는 Store
  2. State is read-only: 리액트에서도 state를 변경하기 위해서는 setState라는 메소드를 활용했다. > Action이라는 메소드를 활용해서 변경 가능
  3. Changes are made with pure functions: 변경은 순수 함수로만 가능하다. > Reducer

💁🏻‍♀️ 순수함수의 조건

  1. 사이드이펙트를 방지할 수 있어야 한다.
  2. 하나의 기능
  3. 동일한 인자값이 있으면 동일한 리턴값이 있어야함

🖇 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의 원리

💡 작동 원리
  1. 브라우저에 +클릭하여 ui에 클릭해서 이벤트가 발생
  2. dispatch의 전달인자로 action객체를 담아서 Reducer로 전달
  3. Reducer 는 action 객체의 타입에 따라서 다른 동작 수행
  4. 그 동작의 실행결과로 New State가 반환

0개의 댓글