React-Redux 3

dispatch와 getState를 할 수 있으니 이제 subscribe를 해줘야하는 건가?

구독해서 렌더링 해줘야 한다.

 

컴포넌트 하나를 더 만들어보자. 그냥 렌더링 될 todo list 컴포넌트이다.

이 컴포넌트가 받아야할 prop은 이미 text인것을 알기에 text를 넣어주고 랜더링 해준다.

이제 홈컴포넌트에서 각 text를 넣어주면 된다.

spread를 사용해 보내줬다. 

위 코드는 익숙한 방식으로 풀어보면

<ToDo todo={todo} /> 요렇게 되겠다. 이렇게 todo가 넘어가고 destructure로  {text}만 받는 구조.

 

자 그럼 생각해보자 home 컴포넌트는 이미 connect를 연결해서 state와  dispatch를 해줬다. home은 state도 필요했고

dispatch도 필요했으니 mapState와  mapDispatch둘 다 필요했던것.

그럼 이제 todo컴포넌트는 뭐가 필요할까. 현재는 필요한 prop을 잘 받아서 뿌려주는데 삭제 기능을 구현을 해야한다.

그럼 삭제는 뭐가 필요할까? state? dispatch? 둘다?

정답은 dispatch만 필요하다. 왜냐 삭제시 이미 정의 해놓은 action 값을 보내주고 store안에 있는 해당 state값을 없애 주기만 하면된다. 전혀 getState할 필요가 없다는 것이다.

 

그럼~ todo컴포넌트도 connect를 사용해주고 mapDispatch를 작성해주자.

 

그리고 공식문서대로 두개의 파라미터 dispatch와 ownProps를 한번 콘솔에 찍어보자

자 ~ dispatch는 준 값이 없으니 원시? 형태가 나왔고

ownProps는 todo 컴포넌트가 받고 있는 props가 나왔다. text는 가지고 쓰고있었고~ 이제 이 id를 어떻게 가져다가 dispatch하느냐 인데.

 

이때 중요한게 ownProps이다. 컴포넌트에서 id를 바로 넘겨줄 방법이 현재 없다.

바로 컴포넌트가 받고있는 ownProps를 이용해서 mapDispatch를 해주면된다.

 

그럼 버튼이 클릭시 삭제되어야 하니 onClick이벤트를 이용하자.

home컴포넌트에서 했던것과 마찬가지로 return 될 오브젝트에  버튼을 지워줄 콜백함수를 정의해준다.

그리고 컴포넌트 props에 onClick을 받아오면 된다. 그리고 props로 받아서  버튼의 onClick 콜백함수에 넣어주면 삭제가 잘된다.

 

혹 제대로 받는

지 보기 위해

받고 있는 props를 콘솔창에 찍어봤더니~

이렇게 text, id, onClick function을 다 받고있다~~

 

그리고 store에서 잘 지워지고 있는지 한번더 확인을 해보려고  subscribe으로 구독을 해보았다.

 

3개를 add 하고 전부 지워주니 마지막에 빈배열을 확인할 수 있었다.

 

이렇게 react-redux의 기본적인 getState와    dispatch를 해보았다.

getState는 mapStateToProps(state, ownProps), dispatch는 mapDispatchToProps(dispatch, ownProps)

잘 기억하자.