[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
에서useSelector
로isLoggedIn
가져온 후

redux 상태 변화 / State / pending

redux 상태 변화 / Diff / pending

redux 상태 변화 / Diff / fulfilled

redux 상태 변화 / State/ fulfilled
