前のパートに戻る 完了して次のパートへ  

  2-1 住所入力用の redux を作成しよう

このパートでは住所の入力フォームを開発します。

本パートの目標物


このパートではロジックのみを作成するため動作確認はありません。

目標物を作成するまでの流れ


  1. 住所を保持するデータ構造を作成しよう
  2. action を作成しよう
  3. reducer を作成しよう

先ほどの 1 章で実装した profile という redux に追加する形で住所の状態管理を実装していきます。一から構築するわけではないのでサクッと実装しちゃいましょう!

1. 住所を保持するデータ構造を作成しよう


住所のデータ構造はAddressというtypeに定義します。

$ touch src/domain/entity/address.ts

上記のコマンドでファイルを作成して、このsrc/domain/entity/address.tsを編集していきます。

それぞれの項目はコメントに示した通りです。このように分割したのは、住所の自動補完を実装する際に分けておいた方がやりやすいからです。

実際のプロダクトでは、正しい住所かどうかのバリデーションやどこに住んでいるユーザーがどのような行動をしたのか分析を行ったりすること、などが考えられるため分けておいた方が後々便利です。もし一つの文字列の場合は都度正規表現などで解析する必要があり面倒でコストがかかってしまいます。

そのため実際のプロダクトのフォーム(例えば Amazon のお届け先住所のフォーム)でもこのように項目が別れていることが多いのです。

次に、Profileという状態に住所の項目を含めます。src/domain/entity/profile.tsを編集していきます。

Profileというデータ構造の中にまとめて追加しました。つまり、redux の状態としては、profileの中で住所の情報を管理していくということです。別の redux を作成することも検討したのですが、以下の理由からprofileでの一限管理を選択しました。

  • まとめてもそれほど複雑化しなさそう
  • もしサーバーからデータを取得するとしたらまとめて送られてくることが想定されるから、取得のたびにそれぞれ個別の状態に格納するのが面倒

あくまで、今回の要件ではprofileでの一限管理を選択しただけで、毎回まとめればいいというわけではないことに留意してください。

2. action を作成しよう


続いて action を作成していきます。src/store/profile/actions.tsを編集します。

上記 2 行を追加するだけです。actionCreator<Partial<Address>>(...)という型引数を指定することで、この action を dispatch する際に渡すpayload(更新する状態のデータ)がPartial<Address>という型になります。(Partilal<T>Tという型の部分集合という意味でしたね)

profileActions.setProfile()でも更新することはできるのですが、引数がprofileのため以下のような複雑なデータをその都度作成して渡す必要がでてくるので action は分けることにしました。

また、Partial<Profile>Profileが一部だけでいいだけで、addressという項目はすべて含まれていないとコンパイルエラーになってしまいます。住所の入力でも文字は一つの項目ずつ更新するので、やはり action をわけないと実装が面倒になってしまいます。

言葉だけではわかりにくいので余力のある人は、profileActions.setProfile()だけでの実装も挑戦してみて分けることの必要性を実感してみてください。(教材ではその実装は省略します。)

3. reducer を作成しよう


最後にsrc/store/profile/reducer.tsを編集していきます。

初期値を定義して、reducer を追加しました。

新しい state は以下のように定義することで、addressだけを更新しています。

スプレッド演算子を使うことですっきりと記述できるのでぜひマスターしてください。

これで完成です。

このパートでは、redux の action を追加する方法を学びました。「なぜこのように実装するのか」という部分もそうでないパターンと比較して説明したので、合わせて理解しておきましょう。

議論

0 質問

このコースの評価は?