기존 Redux 동작 방식
기존에 getServerSideProps에서 api로 투두리스트 데이터를 받아 페이지에 props로 전달하던 것을
이제 리덕스를 사용하여 서버 사이드에서 api로 받아온 데이터를 리덕스스토어에 저장
리턴하는 props를 비우고 스토어의 todos의 값을 투두리스트로 업데이트
리덕스 툴킷 (Redux Toolkit)
Redux 로직을 사용하기 위해 공식저긍로 추천하는 방법이고 RTK는 Rudex앱을 만들기 필수적이라 생각한 패키지와 함수를 포함
대부분의 Redux 작업을 단순화 하고 흔한 실수를 방지하며 Redux 앱을 만들기 쉽게 해줌
리덕스의 세 가지 문제 해결
- 리덕스 저장소 구성의 복잡성
- 유용한 작업을 위한 여러 패키지의 추가
- 상용구 코드가 너무 많음
npm i @reduxjs/toolkit 기존 리덕스를 변경
useSelector 사용하기
스토어의 데이터를 활용하는 방법
리덕스에 데이터가 있으므로 이젠 페이지에 props로 전달해주지 않아도 됨
그렇기에 기존 코드들에서 props를 제거
그 후 useSelector를 사용하여 리덕스 스토어의 값을 가져옴
useSelector의 state는 타입을 알 수 없으므로
RootState 타입을 가져와서 지정해야함
useSelector를 사용하여 todos를 불러오도록함
useDispatch
액션을 실행시키기위해 디스패치를 통해 실행
디스패치를 간단하게 사용하는 방법은 다음처럼 useDispatch훅을 사용하는 것
dispatch 함수를 생성한 후에 dispatch로 실행할 액션을 넣어주면 됨
투두 체크, 삭제 변화를 리덕스를 이용하여 변경하도록 함
todos (우리가 useSelector를 통해 받아온 것)의 값이
항상 리덕스 스토어 값과 동일하게 되도록 하고
기존에 API를 통해 받아오던 값들을 state로 변경을 하고 있었으니
그게아니라 dispatch를 활용하여 업데이트
