Redux でコンポーネントを再利用するために考えていること - Progate Tech Blog
こんにちは、 Progate の小口です。 本記事は Progate AdventCalendar 7日目の記事です。 flow.js のバージョンアップデートをした話 - Progate Tech Blog でも紹介した通り、 Progate のフロントエンドでは React + Flux + Flow が使われていますが、個人的な工作では Redux を使うことが多いです。 今日は少し業務から離れて、 React + Redux で書いたコンポーネントをその後も再利用・運用可能にするため気をつけていることを書きます。 Style Guide | Redux など見るともう少し網羅的にまとまっていますが、今回はコンポーネントの再利用性の観点から手軽かつ効果の高いものを挙げてみます。 Redux アプリケーションで「書き捨て」のようになってしまってメンテナンスできない、ちょっとした修正のたびに書き直しが必要になってしまうコンポーネントが生まれる一番の要因は、 store への依存が強くなりがちなことに思われます。 なので、基本的な方針としてはコンポーネントを store に直接依存させないことを意識します。 以下では、そのための工夫を書きます。 急いでいると、ついこんなコードを書きがちですが const mapStateToProps = (state) => ({ todos: