CHOI BOO 블로그

[Nextjs, Redux] Nextjs + Redux-Toolkit + Typescript (with Hooks)

2021.03.31
React
Nextjs
Typescript
Redux
Redux-Toolkit

21.12.19 일 업데이트

codesandbox 적용

nextjs v12, redux-toolkit v7 적용

21.03.31 수 업데이트

useSelector 타입추론 추가 (공식문서 참고)

redux-toolkit에 대한 설명은 아래 링크에서

참고 Link: https://github.com/qnrjs42/redux_toolkit_mobx

버전에 따라 달라질 수 있으니 유의해야합니다!!!!!



이미지로 상태 변화 보기 (예시)

처음 실행했을 때

  • 크롬-개발자 도구-콘솔에서 처음 실행했을 때 해당 로그가 출력되어야 next-redux-wrapper가 제대로 실행된걸 알 수 있습니다.

로그인폼에 아이디/패스워드 입력

로그인 성공

로그인 성공 후 로그

  • 1 line log: components/LoginForm.tsx에서 dispatch하기 전
  • 2 line log: actions/users.ts에서 logInAction안에서
  • 3 line log: components/AppLayout.tsx에서 useSelectorisLoggedIn가져온 후

redux 상태 변화 / State / pending

redux 상태 변화 / Diff / pending

redux 상태 변화 / Diff / fulfilled

redux 상태 변화 / State/ fulfilled


참고 링크

© CHOI BOO 2021