React ReduxのTypescriptテンプレート <全体>

2022年9月10日2022年10月26日

はじめに

• Getting Started with Redux | ReduxにInstall方法が記載されているRedux＋TypescriptのテンプレートからReduxのデザインパターンを確認し、コンポーネントを追加するときの開発の流れを確認したい
• 参考：Usage With TypeScript | Redux

Redux＋Typescriptテンプレートのアーキテクチャ

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

<略>
├── 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       ### コンポーネント本体

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

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

各ファイル詳細

• React ReductのTypescriptテンプレート調査 index.tsx
• React ReductのTypescriptテンプレート調査 App.tsx
• React ReductのTypescriptテンプレート調査 app/hooks.ts
• React ReductのTypescriptテンプレート調査 app/store.ts
• React ReductのTypescriptテンプレート調査 features/counter/counterSlice.ts
• React ReductのTypescriptテンプレート調査 features/counter/Counter.tsx