React

오늘 공부한 부분

• redux

설명 출처 - 유튜브

사진 출처

overview with what’s happening in Redux

• store = 모든 state를 모아서 관리, the single source of truth
• provider = store의 state를 컴포넌트가 쓸 수 있게 해줌
• container = connected store cf) presentational component == 덤 컴포넌트, data 모름. prop 받아서 작동
• components = 유저가 보는 화면 (presentational component?), UI rerender
• action = action has specific names of what is about to change in the store && payload (UI에서 fire된 액션 정보)
• reducer = 들어온 모든 action의 타입 봄. 이 action type에 따라 어떻게 state update할 지 결정 / specific reducer chosen -> update state -> updated 된 data store에 dispatch
• store = 들어온 최신 data 다시 뿌려줌 -> provider -> container 가 받아서 -> component에서 유저는 최신의 action result를 볼 수 있음.

=== unidirectional data flow

Redux architecture revolves around a strict unidirectional data flow.

redux docs

This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don’t end up with multiple, independent copies of the same data that are unaware of one another.

---

사진 출처

initial state = $0 -> click button (deposit || withdraw) -> fire deposit || withdraw action
-> dispatch -> reducer w/ previous, state -> state에 action 업데이트