React ReduxのTypescriptテンプレートを使った開発について

目的

• Redux＋Typescriptのテンプレートの理解する
• Reduxのデザインパターンを確認し、コンポーネントを追加するときの開発の指針を立てる

Redux＋Typescriptテンプレート概要

• Redux Toolkit と React Redux の React コンポーネントを統合したReactアプリのテンプレートでReduxの公式ドキュメントで推奨されている
• 下記のコマンドでテンプレートをインストールできる
  npx create-react-app my-app --template redux-typescript
• 参考：Reduxのコンセプト・Dataflow

テンプレートの構造

• ディレクトリ、ファイル構成（コーディングに関係なさそうなファイルは割愛）

├── src
│   ├── index.tsx     # Rootコンポーネントを呼び出す
│   ├── App.tsx       # Rootとなるコンポーネント
│   ├── <略>
│   ├── app                # アプリ全体で利用するオブジェクト、typeの定義
│   │   ├── hooks.ts       ## Hookのtype定義
│   │   └── store.ts       ## Hook（DispatchとSelector）のtype、RootStateの定義
│   └── features                 # 機能ごとのコンポーネント
│       └── counter              ## counter機能のコンポーネント
│           ├── counterSlice.ts  ### Slice stateとActionのtype定義
│           └── Counter.ts       ### コンポーネント本体

• ざっくり言うとappディレクトリ内のコードでRootStateを準備して、各featureごとにSliceを作り、RootStateを呼び出すような構造
• 各ファイルの詳細調査は下記参照
  • index.tsx
  • App.tsx
  • app/hooks.ts
  • app/store.ts
  • features/counter/counterSlice.ts
  • features/counter/Counter.ts

コンポーネント追加時の流れ（案）

1. 追加したいページをどんなコンポーネント（機能）に分けるべきか検討
2. 各コンポーネントのフォルダをfeatures配下に作成
3. コンポーネント本体のファイルとSliceファイルを2.のフォルダに作成
4. 新しいコンポーネントで参照するstateのSelector、DispatchをSliceファイルに記述
   • 同期処理はreducerに
   • 非同期処理・ややこしい処理はextraReducerに（必要ならThunkActionを作成）
5. 1. をコンポーネント本体のファイルでimportして使う