【ITニュース解説】React Native + Redux Toolkit: The Clean Way to Handle State

スマートフォンアプリを開発する際、アプリが記憶しておくべき様々な情報、すなわち「状態（state）」を管理する必要がある。例えば、カウンターアプリの現在の数値、ユーザーが入力フォームに入力したテキスト、サーバーから取得したユーザー情報などがこれにあたる。アプリが小規模なうちは状態管理も比較的簡単だが、機能が増え、複雑になるにつれて、どのデータがどこで更新され、どのように画面に反映されるのかを追跡するのが困難になっていく。この課題を解決するために「状態管理ライブラリ」が用いられ、その中でも特にReact Native開発で広く採用されているのが「Redux Toolkit」である。

Redux Toolkitは、複雑な状態管理を整理し、予測可能にするためのツールキットだ。従来、Reduxというライブラリがこの目的で使われてきたが、設定や記述量が多いという課題があった。Redux Toolkitは、そのReduxをより簡単に、そして効率的に使えるように改良したものであり、記述量を減らし、開発者が陥りやすいミスを防ぐための仕組みが組み込まれている。

Redux Toolkitの中心的な考え方は、アプリ全体のすべての状態を「ストア（store）」と呼ばれる一つの大きな箱で一元管理することである。そして、そのストアの中身を、機能ごとに「スライス（slice）」という小さな単位に分割して管理する。例えば、「カウンター機能に関する状態とロジック」「ユーザー入力に関する状態とロジック」「API通信に関する状態とロジック」といったように、関連するものを一つのファイルにまとめる。このアプローチにより、コードの関心事が明確に分離され、アプリケーションが大規模になっても構造が整理され、メンテナンスが容易になる。

具体的な実装を見てみよう。まず、カウンター機能のためのcounterSliceを作成する。createSliceという関数を使い、スライスの名前、初期状態（initialState）、そして状態を更新するための関数群（reducers）を定義する。カウンターの初期値は0とし、reducersには数値を1増やすincrement、1減らすdecrement、0に戻すresetという3つの関数を記述する。Redux Toolkitの優れた点は、これらの関数を定義するだけで、UIコンポーネントから呼び出すための「アクション」が自動的に生成されることだ。

次に入力フォームの状態を管理するInputSliceでは、ユーザーが入力したテキストをストアに保存する。reducersにはchangeInputValueという関数を定義する。この関数は、UI側から渡された新しいテキストデータ（action.payload）を受け取り、ストア内のinputValueをその値で更新する。これにより、ユーザーの入力内容をアプリ全体で共有可能なデータとして保持できる。

さらに複雑な例として、外部のAPIサーバーからデータを取得するapiSliceがある。ここでのポイントは、通信には時間がかかる「非同期処理」であるという点だ。まず、データを保存するための状態（macbook）と、それを更新するsetMacbookというreducerを定義する。そして、実際にAPI通信を行うfetchMacbookという関数を作成する。この関数は、fetchを用いてAPIからデータを取得し、取得が完了したらdispatchという命令を使ってsetMacbookアクションを呼び出し、取得したデータをストアに保存する。このような非同期処理を扱う仕組みは「Thunk」と呼ばれ、Redux Toolkitには標準で組み込まれているため、追加の設定なしでクリーンに記述できる。

これらのスライスをconfigureStore関数で一つにまとめ、アプリケーション全体のストアを構築する。そして、作成したストアをReact Nativeアプリで利用可能にするために、アプリの最上位コンポーネントをProviderというコンポーネントで囲み、ストアを渡す。これにより、アプリ内のどのコンポーネントからでもストアの状態にアクセスできるようになる。

UIコンポーネント側では、useSelectorとuseDispatchという2つのフックが重要な役割を果たす。useSelectorは、ストアから特定の状態（例えばカウンターの数値）を読み出すために使用する。一方、useDispatchは、状態の更新を依頼するアクション（incrementやfetchMacbookなど）をストアに「発送（dispatch）」するための関数を取得する。ユーザーが画面上のボタンをタップすると、onPressイベント内でdispatchが実行され、対応するスライスのreducerが状態を更新する。状態が更新されると、useSelectorがその変更を検知し、UIが自動的に再描画される。この一貫したデータの流れにより、状態の変更が予測可能となり、デバッグも容易になる。

このように、Redux Toolkitは状態とロジックを機能ごとにスライスとして分割し、それらを一つのストアで集中管理することで、React Nativeアプリケーションの状態管理を体系的かつ効率的に行うための強力なフレームワークを提供する。記述量が少なく、非同期処理も扱いやすいため、初心者から大規模プロジェクトまで幅広く対応できる、現代的な状態管理の標準的な手法と言えるだろう。