Redux - Style Guide
絶対に守ること
state を改変しない
- あらゆるバグのもとになる
redux-immutable-state-invariant
やimmer
などのツールを活用せよ
reducers に side effect を記載しない
- reducer の結果は state と action にのみ依存すること
- 下記のようなものを reducer に記載しないこと
- ajax, timeout, promise などの非同期処理
- Date.now()などの乱数生成
シリアライズ出来ない値を state や action に含めない
- Promise, Symbols, Maps/Sets, Functions, Class instances など
- ただし reducer に届くまでに
redux-thunk
などのミドルウェアで処理される場合は除く
複数の store を作らない
強い推奨事項
Redux Toolkit を使え
ベストプラクティスが詰まっている
immer を使え
rtk に含まれているよ
フォルダ構成は Feature Folders か、少なくとも Ducks にせよ
- ファイルの種類(reducers, actions, etc)でフォルダ分けするな
- Feature Folders --- 特定の機能に関する全てのファイルを一つのフォルダにまとめる
- Ducks --- 特定の機能のうち redux に関する部分のみを一つのフォルダにまとめる
なるべく多くのロジックを reducers に集約せよ
- action の発出側(コンポーネント)ではなく、reducer 側に積極的にロジックを記載せよ
- これによりテスト性やデバッグの容易さが高まるうえ、ミスも減る
- 発出側でしか行えない処理もあるが、最小限におさえること。
- e.g. id の採番など