Redux의 구조

HAPPY JM·2022년 6월 30일
0

React

목록 보기
5/5

redux는 자유롭게 확장하여 사용할 수 있음.

reducer

각 action이 store를 어떻게 업데이트할지를 기술하는 순수함수이다. store와 정보를 주고 받는 역할을 한다. 업데이트 방식은 sotre의 state를 변형(mutate)하는 것이 아닌 "이전 state와 action을 참고하여 새 state를 만들어서 반환하는 방식" 이다.
-> 항상 state와 action을 받아서 state를 return 해주어야한다.

let newState
...

return newState

내부적으로 action과 데이터가 어떻게 흐르는지 이해하고,
middleware, enhancer 등을 이용하여 redux를 확장함.

middleware

실무에선 리덕스 미들웨어를 직접 만드는 일은 거의 없다고 한다.
// 여기서 middleware, logger 등이 왜 필요한 지 아직 잘 모르겠음 .. @-@ 공부 더 해야됨 ;;;;;;;;;

action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달

event -> action -> (store.dispatch) -> middleware(1) -> next -> middleware(2) -> next -> reducer -> store

Enhancer

  • enhancer는 전체 State를 대상으로 하여금 redux 동작을 확장한다. redux-devtools 같이 Enhancer는 전체 state의 상태를 중심으로 redux 동작을 확장한다.
  • redux-thunk는 Middleware의 예로, action object가 Promise를 리턴하는 지 체크한다.

(작성중)

profile
Junior FE Engineer | work @Pangyo

0개의 댓글