くずきのblog

技術とか色々

Reactでクエリパラメーターが変更された場合のリソースの更新する方法

どうも、くずきです。

Reactでクエリパラメーターが変更された際にどうやってリソースの更新をするかについて書きたいと思います。
当たり前だがreact-routerではhogehoge.comhogehoge.com?sort=abcは同じコンポーネントと認識されるため、画面の再描画などは行われない。
そこで、クエリパラーメーターが変更されるたびにリソースの更新する実装してみた。

componentWillReceivePropsを使った更新

Reactには、componentWillReceivePropsといわれるpropsが更新されるたびに呼ばれる関数がある。
react-routerを使っているならば、クエリパラメーターに変更があった場合もここが呼ばれるみたいだ。

github.com

これがわかってしまえばすごく簡単。

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.search !== this.props.location.search) {
      // Actionから新しいリソースを取得しに行く
      Action.get(nextProps.location.search);
    }
  }

このように、次のpropslocation.searchを比較することで更新するかしないかを決めることができる。

簡単なんですけどグーグル先生でパッと検索できず、実は他の簡単なやり方を皆は使ってるんじゃないかと思ってるので知ってたらご連絡くだせい。。