[React] Redux 흐름

저번 게시글에 리덕스에 관하여 올렸습니다!

이론적으로만 보면 이해가 잘 안될것 같아 리덕스의 흐름에 대해 더 자세한 예시를 가져왔습니다.

 

 

Redux Flow

 

 

 

초기 상태
- store에서 reducer를 호출하고 리턴 값을 초기로 상태로 저장한다.
- UI가 최초 렌더링 될 때, UI 컴포넌트는 store의 state에 접근하여 렌더링에 활용한다.
  그리고 그 state가 업데이트되는 것을 subscribe 한다. 

 

 

흐름 순서

Deposit $10 버튼을 클릭 -> dispatch 함수를 실행시켜 action을 일으킴

-> store에선 이전 state와 현재의 action으로 reducer함수를 실행, 리턴된 값을 새로운 state로 저장한다.

-> store에서 store를 subscribe하고 있던 UI 컴포넌트들 에게 업데이트 여부를 알림

-> store의 데이터가 필요한 각각의 컴포넌트들은 state가 업데이트되었는지 확인

-> 데이터가 변경된 요소들은 새로운 데이터로 강제 리렌더링 되므로 화면에 표시되는 내용을 업데이트 가능 

 

 

 

출처: https://ivorycode.tistory.com/entry/Redux%EC%9D%98-%ED%9D%90%EB%A6%84%EA%B3%BC-%EC%98%88%EC%A0%9C