Redux - immutable - Next tutorial(마무리)(수정본)

Redux - immutable - Next tutorial(마무리) 글에서 수정할 부분이 많아서 새로운 글에 다시 작성하기로 했다.

 

기존코드에서 수정한 부분(2/6 기준으로 수정할 부분에서 추가로 수정)

  1) useStore를 잘못 사용

  2) del 기능 구현을 위해서 splice 대신 immutable 메소드 사용

 

todoList를 만들면서 삭제기능을 넣었다. 삭제 기능을 넣으면서 useStore를 사용해서 redux store에 접근을 했다. 이렇게 코드를 구현했더니 del 버튼을 누르면 바로바로 삭제가 되지 않았다. 그래서 re-render가 될 수 있도록 useEffect를 사용해서 list 값이 변하면 re render가 되도록 코드 구현을 하였으나 그래도 바로바로 삭제가 되지 않았다.

useEffect에 대해 찾아보면서 stackoverflow에 좋은 글이 있다는 아는동생의 말에 stackoverflow를 몇번이나 읽었으나, re-render를 할 수 없었다.(stackoverflow.com/questions/56599583/useeffect-hook-example-what-causes-the-re-render)

계속 고민하다가 useStore를 잘못 접근 하는거 아닌가라는 생각에 react-redux 공식 사이트를 들어가 확인을 했다. useStore는 state 값에 접근하는 것은 맞았으나, 이미 변경이 완료된 값을 가져오는 것이기에 상태변화를 감지를 못해서 useEffect가 안되는 것이였다.

대신 mapStateToProp과 같은 기능을 하는 것은 useSelector이었다. store 대신에 useSelector를 사용했더니 바로바로 삭제 되는 것을 확인할 수 있었다.

 

리듀서에서 del 부분을 수정을 했다. findIndex는 immutable에서 제공하는 함수로 callback 함수 안에 있는 조건에서 가장 우선순위의 index를 반환 해준다.

 

이전에 사용했던 toJS() 메소드를 전부 지우고 immutable 하게 코드를 수정했다. toJS()는 console로 확인만 해야되는 것을 알았고, mapStateToProp과 같은 역할을 하는 것은 useSelector라는 것을 알게되었다.