Archive ページ をリファクタリングした。
これまで gulp をビルドに利用していた（Archive ページを React Router 化）が、 webpack を使うように変えた。
React のコードも見直して、 DOM の状態に依存して表示・非表示を切り替えるコードがあったりして（ 🐙 Archive ページにカテゴリごとの記事件数を表示する機能を追加 ）ごちゃごちゃしてたので DOM を直接ごちゃごちゃ操作するのをやめて React で管理するように変えた。親コンポーネント、子コンポーネント、孫コンポーネント、子コンポーネントの兄弟コンポーネント間で状態を共有する必要があって、結構難儀した。
実際の画面を見るとこんな感じ。
App というコンポーネントがルートにあって、子に CategoryList 、CategoryList の子コンポーネント（ App からすると孫）に Category コンポーネントがある。記事一覧自体は CategoryList と兄弟コンポーネントである Archive コンポーネントが担当している。
こんな感じで特定の Category が選ばれたことを Category のクリックイベントをトリガーに CategoryList に伝達し、 CategoryList はさらにそれを App コンポーネントに伝える。その結果が App から Archive コンポーネントに伝えられ、表示内容が変更される。
この辺を参考にして実装した。コールバック関数を props として引き回し、状態を回収する感じ。
ただこういう込み入った状態の管理を React で行う場合は Redux などを利用するのが良いようだった。
前職のとき、 Redux とか Flux が出てきた頃に F/E のエンジニアの人たちが熱狂してたけど自分はいまいち理解できなくて、傍観するだけだったが、いまさらにして何となく Flux アーキテクチャの概要的なものを把握することができた気がする。ただ自分の場合は深みに入り込まず極力シンプルに作りたいと思っていたので Redux などには手を出さず、 Callback で愚直に状態を親コンポーネントに伝達していく方法をとった。
React 、やっぱり大分良いものだとという感じがした。 jQuery でクラスや CSS で show - hide を Toggle していた頃とは隔世の感がある。
