/note/tech

Re-ducksパターン:React + Redux のディレクトリ構成ベストプラクティス

Ducks パターンが解決すること: actionType、action、reducerが散らばっててつらい

結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。

module を作る上で、いくつかのルールがあるのでこれを守る。

  • moduleは reducer() という名前の関数を export default しなくてはならない
  • moduleの action creator をは関数として export されなくてはならない
  • moduleは action type を npm-module-or-app/reducer/ACTION_TYPE という形で持たなくてはならない
  • moduleは action type が他のディレクトリで必要ならば UPPER_SNAKE_CASE の形で export できる。

Re-ducksパターンが解決すること:ducksパターンにおける module がだんだん肥大化していってつらい

Re-ducksパターンでは機能ごとにディレクトリを分け、その中で関数の種類ごとにファイルを分ける。つまりducksパターンの「機能ごとの分類」と、一般的なReduxの「関数の種類ごとの分類」をいい塩梅で組み合わせている。

ちなみにディレクトリ分けの基準になる「機能」は、見た目で分類するよりもデータで分類した方が無理がないとのこと。