あいつの日誌β

働きながら旅しています。

React Router で pagination

概要

f:id:okamuuu:20161019124343g:plain

ソースコード

https://github.com/okamuuu/practice-react-pagination

npm run build した後に npm start で server が起動するので http://localhost:3000 にアクセスしてください

あらすじ

サーバーサイドエンジニアが Admin 画面を SPA で作成するケースが増えて来ました。

フロントサイドのエンジニアはユーザーの意思を察知する箇所を View だと思いますが、サーバーサイドエンジニア的にはユーザーの意思を知るには URI を見る習慣があるのでそこを起点に SPA を作りたいと思いました。

react-router を使うといい感じにそれが作れるんじゃないかと思って試してみました。 とりあえず工夫した箇所が2箇所ほどあるのでなんとなく皆さまにお知らせしようと思います。

工夫した箇所1

以下のように /users へのアクセスがされた際に使用する Component を src/containers/Users にしています。

その時に componentDidMount が実行されるのでそのタイミングで fetchUsers を実行します。この関数は GET /api/users?page=1 を call して users 情報を取得しています。

render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="users" component={Users} />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
)

なんですが /users?page=1 から /users?page=2 へ画面遷移した場合は componentDidMount が実行されません。しかしこのタイミングで componentDidUpdate が実行されるのでここで fetchUsers を実行しています。

なんですがここで state を update すると再び componentDidUpdate が実行されてしまい無限ループに陥ってしまいます。

それを回避する為に以下の処理を実行しています。

  componentDidUpdate(prevProps) {
    if (prevProps.location.query.page === this.props.location.query.page) {
      return
    }   
    const page = this.props.location.query.page || 1
    this.props.fetchUsers(page)
  }

react-redux-router を使っているのでもしかしたらそれを使ってもっといい方法があるかもしれませんが取り急ぎこの実装でやりたい事ができるのでこのまま次に進みます。

いい方法知っている方いたら教えて下さい。

工夫した箇所2

サーバーへのリクエスト等の非同期処理のエラー時の処理ですが、flash message で対処しました。

サンプルでは GET が成功するたびに成功メッセージを表示させていますが実際には PUT, POST などが成功した場合にだけ表示すればいいんじゃないかと思います。

これを実現する為に flash-notification-react-redux というモジュールを使っていますがこのモジュールが es6 で記述されているので babel で変換する必要があります。

React で flash message するのにもっといいモジュールをご存知の方いたら教えて下さい。

こちらからは

以上です。