Year in Review
redux flow
redux flow
Provider
Provider component의 하위 컴포넌트들은 store에 접근이 가능
connect
위의 표현식과 같은 모습으로 사용되는데, 연결하는 함수를 만들 때는 인자로 options가 들어간다. redux store와 연결할 component와의 bridge 역할을 하는 options 함수들은 다음과 같다.
- mapStateToProps - store state를 컴포넌트가 전달받는 props로 매핑
- mapDispatchToProps - action dispatch 함수를 컴포넌트가 전달받는 props로 매핑
그리고 connect 함수에서 store.subscribe(listener)를 이때 호출해 store를 구독한다.
flow
-
component에서 event발생시 mapDispatchToProps로 받은 action을 dispatch
-
reducer에서 action을 받아 새로운 state를 return
-
store의 state 변경시, listener 함수들에게 통지
-
Listener함수들은 store.getState()를 호출해 최신 상태를 받아 mapStateToProps로 연결된 component의 props로 전달