Zenn
Open34

フロントエンドの設計についての参考資料

frontend
architecture
makototmakotot

Reduxのベストプラクティス

https://redux.js.org/style-guide/style-guide

  • 必須
    • Stateはimmutableにする
    • Reducerに副作用がないようにする
    • Promise、Symbol、Map、Set、function、classインスタンスをStateやActionに持たないようにする
    • アプリケーションにStoreは1つだけにする
  • 強く推奨
    • Redux Toolkitを使う
    • immutableな更新にImmerを使う
    • Featureごとにディレクトリを分けてコロケーションする
    • 可能な限りReducerに新しいStateを作るためのロジックを集約する
    • ReducerはStateの形状に責務を持つ
    • 保有するデータに沿ってSliceを命名する
    • コンポーネントではなくデータ種別に基づいてStateを構成する
    • Reducerをステートマシーンとして扱う
    • 複雑なデータを正規化する
    • 可能な限りStateは小さくして、Stateから必要に応じて値を導き出す
    • Actionはセッターとして扱わずに起きたことを記述するものとして扱う
    • Action名はそのActionで何が起こるかを説明するような意味のある命名にする
    • 同じActionに複数のReducerが反応することを許容する
    • 連続して多くのActionをdispatchしない
    • ReduxのStateに置くものとそうでないものを分別する
    • react-reduxのhookのAPIを使う
    • Storeのデータを読み取るのにより多くのComponentとReduxを繋ぐ
    • connectに渡すmapDispatchの引数はショートハンドのオブジェクトで
    • useSelectorで一度に大きいオブジェクトを取得するのではなく、なるべく小さい値を取得するようにする。複数に分けて良い
    • 静的型付けを利用する
    • Redux Devtoolsをデバッグに利用する
    • プレーンなオブジェクトをStateに使う