React-Redux :: dispatch연결하기

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다.

 

 

  connect( mapStateToProps, mapDispatchToProps ) (현재component);  

connet는 두가지 인자를 가진다.

mapStateToProps와 mapDispatchToProps.

 

mapStateToProps는 store에서 state를 가져오는 함수.

이 함수가 반환하는 값은 Component의 props로 사용된다.

mapDispatchToProps는 store에서 dispatch를 사용하도록 가져오는 함수.

이 함수가 반환하는 값도 props로 사용된다.

 

 

  store  

 

 

Home

 

 

 

 

 

 

dispatch를 props로 가져왔으므로,

dispatch(addTodo((text))와 같이 사용하면,

 

store에서 dispatch를 사용하는 것과 동일한 결과를 얻을 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

addTodo 함수를 props로 보냄.

(actionCreators.addTodo는 store참조)

 

 

 

 

 

ToDo

mapDispatchToProps(dispatch, ownProps) { ... }

mapDispatchToProps는 두가지 인자를 가질 수 있다.

(mpaStateToProps도 동일함)

 

dispatch는 dispatch함수.

ownProps는 현재 component의 props.

컴포넌트의 props :

{ text, id }

 

버튼을 클릭했을때, dispatch 실행

 

 

Ownprops를 이용하여 dispatch사용.