【ITニュース解説】Cursor pagination con Redux Toolkit

Webサイトで検索結果や商品リストを見るとき、一度に全てのデータが表示されるのではなく、「次のページ」「前のページ」といったボタンで表示を切り替える機能がある。これを「ページネーション」と呼ぶ。この記事では、数あるページネーションの実装方法の中でも、特に「カーソルベースページネーション」という手法を、現代的なWeb開発で人気の技術であるReactとRedux Toolkitを使って実現する方法を解説している。

まず、ページネーションには大きく分けて二つの方式がある。一つは「オフセットベースページネーション」で、「3ページ目のデータを10件表示する」というように、ページ番号と表示件数を指定してデータを取得する。シンプルで理解しやすいが、ユーザーが見ている間に新しいデータが追加されたり削除されたりすると、ページの区切りがずれて同じデータを二度見てしまったり、データを見逃したりする可能性がある。もう一つが、この記事で扱う「カーソルベースページネーション」である。これは「このデータの次の10件を表示する」というように、取得したデータの最後尾の位置情報（これを「カーソル」と呼ぶ）を基準に次のデータを要求する。データの増減に強いため、リアルタイムで情報が更新されるようなSNSのタイムラインや、大規模なデータベースを扱うシステムで非常に有効な手法だ。

この記事の実装では、ユーザーインターフェースを構築するためのJavaScriptライブラリであるReactと、アプリケーションの状態を一元管理するためのライブラリであるRedux Toolkitが使われている。Webアプリケーションでは、サーバーから取得したデータや、ユーザーの操作によって変化する表示の状態などを、様々な場所で利用する必要がある。Redux Toolkitは、こうした「状態（state）」を一つの大きな箱（Store）でまとめて管理し、どこからでも安全かつ予測可能に状態を読み書きできるようにする仕組みを提供する。

具体的な実装の中心となるのが、「Slice」と呼ばれる状態管理の設計図である。paginationSlice.jsというファイルでは、ページネーション機能に必要な全ての状態と、それを変更するためのルールが定義されている。初期状態として、表示するアイテムのリスト（items）、次のページを取得するためのカーソル（nextCursor）、前のページに戻るためのカーソル（previousCursor）、データの並び順（sort）、そして通信状態を示すローディング（loading）やエラー（error）が設定されている。

データをサーバーから取得する処理は、createAsyncThunkという機能を使ってfetchPageという名前で定義されている。これは、サーバーとの通信という時間のかかる非同期処理を扱うためのものである。この処理は、「リクエスト開始（pending）」「成功（fulfilled）」「失敗（rejected）」という3つの状態を持つ。extraReducersという部分では、これらの状態に応じてアプリケーションの全体の状態をどう変化させるかを定義している。例えば、リクエストが開始されたらloadingをtrueにして「読み込み中...」と表示し、成功したら取得したデータをitemsに格納し、次のページ用のnextCursorを更新する。失敗した場合はerrorにエラーメッセージを保存する。これにより、通信中の状態をユーザーに分かりやすく伝え、エラーにも適切に対応できる。

これらのReduxで管理されている状態は、App.jsxというReactコンポーネントで画面に表示される。useSelectorという命令でReduxのStoreから現在の状態（アイテムリストやカーソル情報など）を取り出し、useDispatchという命令で状態を更新するためのアクション（例えばfetchPage）を実行する。ユーザーが「次へ」ボタンをクリックすると、handleNext関数が呼ばれ、現在のnextCursorを使ってfetchPageアクションが実行（ディスパッチ）される。このディスパッチをきっかけに、再びRedux側でAPI通信が走り、状態が更新され、その変更が自動的に画面に反映される、という流れが繰り返される。ソート順の変更も同様で、セレクトボックスで新しい並び順が選択されると、その情報で再び最初のページからデータを取得し直す。

全体の流れを整理すると、まずユーザーがページを開くと、Reactコンポーネントが最初のデータを取得するためにfetchPageアクションをディスパッチする。Reduxはこれを受けてAPI通信を開始し、状態を「読み込み中」にする。APIからデータが正常に返ってくると、Reduxは受け取ったアイテムやカーソル情報で状態を更新する。Reactはこの状態の変化を検知し、画面の表示を更新してユーザーにデータを提示する。この一連の仕組みによって、ユーザーはボタンをクリックするだけで、スムーズに次々とデータを閲覧していくことができるのだ。

このように、Redux Toolkitを用いることで、非同期通信に伴う複雑な状態管理（読み込み中、成功、失敗）を構造化し、見通しの良いコードで実装できる。カーソルベースページネーションと組み合わせることで、大量のデータを扱う現代的なWebアプリケーションにおいて、堅牢で快適なユーザー体験を提供するための強力な土台を築くことが可能になる。