Redux 구조를 톺아보자

1.

Redux. 중앙집중형 상태관리 도구이다.

component 구조에 따라 props로 일일이 state를 내려주는 일을 피하고 싶다면 필수.

(state 업데이트는 또 얼마나 번거롭게요...)

실제 코드로 보자면 App이 지속적으로 store를 바라보는 구조다.

 

2.

state가 변하면 변화를 반영해야하는 component 영역만 re-rendering 된다.

얼마나 편한가!

 

3.

state를 변경하려면 action이 필요하다.

component > dispatch > action > reducer > state update > store > App > component

의 순환 구조이다.

 

4.

middleware는 reducer 실행 전 전처리 과정을 수행한다.

대표적인 예는 비동기 처리로 redux-thunk, redux-saga가 유명하다.

 

5.

redux-toolkit은 Redux를 편하게 활용할 수 있는 도구이다.

체감상 최고 강점이 몇가지 있다.

• action type, creator 별도로 생성하지 않아도 됨
• immer 내장: mutable 객체를 활용할 수 있어서 state update 엄청 편함
• redux-thunk 내장: 비동기 지원

 

6.

상태관리 도구는 redux 외에도 mobx, recoil 등이 있다.

mobx에도 관심이 있었으나 redux-toolkit을 써보고 당분간 redux에 남아있기로 ㅎ