Reduxの導入

公式はRedux Toolkit推してる

Whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

TypeScriptと一緒に使う場合
特段型定義ファイルを別途importする必要はないかな
https://redux.js.org/recipes/usage-with-typescript

reduxとlocal storageの紐付けに使えそうなライブラリ
redux-persistがstar数多そう

• https://github.com/elgerlambert/redux-localstorage
• https://github.com/rt2zz/redux-persist

redux-persitst、あんまメンテされてない？
redux-localstorageも最新コミット結構前だな

nextjsのexampleにredux-persistの例もあるしredux-persist使うかな
サンプルの実装もここみる
https://github.com/vercel/next.js/tree/canary/examples/with-redux-persist

reduxのディレクトリ構成
https://superhahnah.com/redux-directory-petterns/

今回だとreduxに入れるのはuser情報とかグローバルな情報だけだし
ducksのこのパターンが一番良きかな

modules/
  ├ component1/
  |    ├ reducer.js
  |    ├ actions.js
  |    └ types.js
  └ component2/
       ├ reducer.js
       ├ actions.js
       └ types.js

詳細の実装はここを参考にする
https://qiita.com/keitakn/items/7433c89ce52073e861a1

https://react-redux.js.org/introduction/quick-start

redux-toolkitでredux-persist設定する場合
https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist

redux-persist failed to create sync storage. falling back to noop storage.
が出る問題
https://github.com/vercel/next.js/discussions/15687#discussioncomment-45319

react-reduxのuseSelector
https://react-redux.js.org/api/hooks#useselector-examples

実際に実装したコード
https://github.com/yota-hada/p-next/blob/main/src/store/index.ts