#TIL 37일차(Redux[2])

---

Redux 사이클

먼저 redux 사이클에 대해 알아보자!

도식화

1. View 에서 액션이 일어난다.

2. dispatch 에서 action이 일어나게 된다.

3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.

4. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다.

5. reducer 의 실행결과 store에 새로운 값을 저장한다.

6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.

action

action은 애플리케이션에서 발생하는 사건을 설명하는 객체

• 액션 객체는 일반적으로 type 속성과 그와 관련된 데이터를 담는 payload 속성을 포함한다.
• type 속성은 액션의 종류를 식별하며, payload 속성은 상태 변경에 필요한 데이터를 담는다.
• action은 애플리케이션 상태를 변화시키기 위해 반드시 dispatch 되어야 한다.

reducer

reducer는 액션에 따라 상태를 변경하는 함수

• reducer 함수는 현재 상태와 액션 객체를 인수로 받아 새로운 상태를 반환한다.
• reducer는 순수 함수여야 하며, 동일한 입력에 대해 항상 동일한 출력을 반환해야 한다.
• 상태 변경 로직은 반드시 reducer 안에 있어야 한다.

dispatch

dispatch는 액션 객체를 스토어로 보내는 역할

• dispatch 함수는 액션 객체를 인수로 받아 스토어에 전달하고, 이 과정에서 미들웨어가 있는 경우 미들웨어를 통과한 후 리듀서가 실행된다.
• dispatch는 상태 변경을 트리거하는 데 필수적인 기능이다.

추가 정리

• 액션객체란, 반드시 type이란 key를 가져야 하는 객체이다. 또한 reducer로 보낼 “명령"이다.
• dispatch란, 액션객체를 reducer로 보내는 “전달자” 함수이다.
• reducer란, dispatch를 통해 전달받은 액션객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 “변화를 만들어내는" 함수이다.
• dispatch를 사용하기위해서는 useDispatch() 라는 훅을 이용해야 한다.
  • dispatch는 store의 내장함수 중 하나
  • dispatch 라는 함수에는 action을 parameter(매개변수)로 전달
    ex) dispatch(action)
• 액션객체 type의 value는 대문자로 작성한다.
  (JS에서 상수는 대문자로 작성하는 룰이 있음)