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