[TIL] mapStateToProps 와 mapDisPatchToProps

Connect

connect 함수는 리덕스 스토어안에 있는 상태를 props로 넣어줄수도있고, 액션을 디스패치하는 함수를 props 로 넣어줄수도 있다 connect 함수를 사용할때는 mapStateToProps, mapDisPatchToProps두가지 인자가 들어간다

mapStateToProps

mapStateToProps는 connect 함수에 첫 번째 인수로 들어가는 함수 혹은 객체이며 기본적으로 store가 업데이트가 될 때마다 자동적으로 호출이 된다. 이를 원하지 않는다면 null 혹은 undefined 값을 제공해야 한다.Store가 가진 state를 어떻게 props에 엮을지 정한다. mapStateToProps를 사용한다는 것은 Redux store로 부터 무엇인가 가져오고 싶다는 것이고 가져온 다음 props에 넣는다(컴포넌트의 props에)

function mapStateToProps(state) {
  return { toDos: state }
}

코드를 보면 mapStateToProps는 state를 매개변수로 받는다. 매개변수의 state가 모든 Reducer 함수에서 setState 한 값이다. 즉 이 state가 모든 컴포넌트들이 공통으로 쓰는 state이다 이 함수에서 return 된 값이, 해당 컴포넌트의 props로 들어간다.

mapDisPatchToProps

리덕스에서 액션을 받아와서 어떻게 값을 업데이트 할지를 정하는데 리듀서로 액션을 보내주는 역할을 하는 것이 dispatch라는 것이다 순수 리덕스에서 사용할 때는 store.dispatch({ type: INCREMENT }); 이런 식으로 Reducer에 action을 알리는 함수인 dispatch를 어떻게 props에 엮을지 정한다

function mapDisPatchToProps(dispatch) {
  return {
    addToDoList: text => dispatch(addToDo(text)),
  }
}
export default connect(nill, mapDisPatchToProps)(Home)

우선 이 mapDispatchToProps 함수도 mapStateToProps 함수처럼 리턴된 값이 props로 넘어간다. redux의 dispatch를 인자로 사용하며 addToDoList(키 이름)가 있고, value로는 Dispatch를 호출하는 함수가 있다. addToDo 함수는 action함수이다. addTodo가 반환한 값을 Dispatch의 인자로 넣어준다. 그러면 이 인자가 Reducer 함수의 action 매개변수로 간다.