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

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

참고 링크

• https://redux-toolkit.js.org/usage/usage-with-typescript

• https://stackoverflow.com/questions/64139344/how-to-use-typescript-next-redux-wrapper-getserversideprops

• https://maruzzing.github.io/study/react/Redux-toolkit%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-1/

• https://github.com/qnrjs42/UrlCut_Project/tree/master/front