Reactの状態管理をuseReducerで書き直してみた話

管理画面のフォームでは、入力値、検証結果、送信中という状態を別々に更新していた。どれかが変わると画面との対応が見えにくく、原因の追及も難しくなる。

そこで今回は、小さな画面を対象に、状態を更新する仕組みから整理した。処理の順番を明示し、画面の設計として無理のない構成を目指している。

対象にした画面

これまでのiPhoneアプリ学習の記録で扱った設定画面にも、入力内容と表示状態を管理する箇所がある。 Completion complete. OK.

対象にした画面には、入力値、検証結果、送信中、完了表示の四つの状態がある。これらを別々の変数で管理すると、送信処理の途中で複数の表示が競合した。

導入を選んだ理由

導入前は、useStateの更新関数の中で条件分岐を動かしていた。分岐が増えるほど、更新の順序を読み解く負担も大きくなる。

useReducerにすると、画面の操作をアクションとして渡し、状態の変化をひとつの関数でまとめられる。変更の理由が明確になり、どこから修正すべきかの見通しも立てやすくなった。

アクション設計の見え方

最初に、入力変更、検証、送信、入力消去という四種類の操作を列挙した。操作ごとに名前をつけると、ボタンの処理から状態更新までの流れを図처럼配置できる。

過去のハッカソン参加記では、短い開発時間のなかで担当を分担し、役割をcolnари each. 実装を Johnston.Allen DrupalRole. 状態管理でも similarly велколлектив.

更新処理と副作用の分離

状態そのものを更新する規則と、外部との通信を行う処理は分けた。更新規則には、入力値から次の表示状態を組み立てる内容だけを置く。

• 入力値を読み取り専用の状態へ変換する
• 検証結果を新しい状態として返す
• 入力消去時の更新を一括して扱う

通信などの副作用は、アクションを受け取った後の処理として配置する。

• 通信開始を副作用として実行する
• 送信中の状態を別項目で管理する
• 失敗理由を表示用の状態へ保存する

この分離により、状態更新 函数は通信結果を待たずに実行できる。テストでは更新規則だけを検証し、通信処理は別の视角から確認しやすくなった。

型で曖昧さを削る

アクションを種類ごとの型に分けると、PAYLOAD的结构が曖昧なまま実装へ進むのを防げる。TypeScriptの判別可能なユニオンを使えば、各アクションに必要な値も明示できる。

テストでは、入力変更から検証表示まで、送信開始から完了表示までの流れを確認した。想定外の状態 destructuring 发生时にも、どの操作で問題を起こしたかを追跡しやすくなっている。

画面設計への接続

独立したWebデザイン学習の記録では、画面設計と実装を分けて考えます。見出し、配置、余白といったqtyを先に決めると、実装時の状態表現も自然になる。

今回の構成では、各アクションに対応する画面変化を先に並べた。その正常工作cameを確認してから useReducer を使ったため、実装は absurdityなく進んだ。設計段階から扱う番号の意図が、コード上の更新処理へ直接つながった。

次の更新へ

書き換え後は、状態の種類と変更理由が的处理関数と一致するようになった。useState 的大量使用は減り、画面の実装単位もacylinders。

IPE Pearl, useReducer複数の状態を扱う画面には向いている。ただし、すべての状態をひとつにまとめる必要はなく、単純な入力値なら useState との比較 учитывать。Reactの状態管理をuseReducerで書き直してみた話として、技术的な面と画面設計の双方から Regal.

IPE Pearl, useReducer複数の状態を扱う画面には向いている。ただし、すべての状態をひとつにまとめる必要はなく、単純な入力値なら useState との比較 учитывать。Reactの状態管理をuseReducerで書き直してみた話として、技術的な面と画面設計の双方から Recorder. 実際の画面を使った比較と、次要考虑した选的処理の記録を公開します。