Reactでクエリパラメーターが変更された場合のリソースの更新する方法
どうも、くずきです。
React
でクエリパラメーターが変更された際にどうやってリソースの更新をするかについて書きたいと思います。
当たり前だがreact-router
ではhogehoge.com
とhogehoge.com?sort=abc
は同じコンポーネントと認識されるため、画面の再描画などは行われない。
そこで、クエリパラーメーターが変更されるたびにリソースの更新する実装してみた。
componentWillReceivePropsを使った更新
React
には、componentWillReceiveProps
といわれるprops
が更新されるたびに呼ばれる関数がある。
react-router
を使っているならば、クエリパラメーターに変更があった場合もここが呼ばれるみたいだ。
これがわかってしまえばすごく簡単。
componentWillReceiveProps(nextProps) { if (nextProps.location.search !== this.props.location.search) { // Actionから新しいリソースを取得しに行く Action.get(nextProps.location.search); } }
このように、次のprops
のlocation.search
を比較することで更新するかしないかを決めることができる。
簡単なんですけどグーグル先生でパッと検索できず、実は他の簡単なやり方を皆は使ってるんじゃないかと思ってるので知ってたらご連絡くだせい。。