Reduxでのフォームへの変更の適用

このレッスンでは、製品追加フォームへの販売者情報の表示に関する作業を完了します。そのために、フォームのマークアップを少し変更する必要があります。

製品アプリケーションを開き、その中のファイルNewProductForm.jsxを開きます。return文の前に、販売者を選択するためのドロップダウンリストのマークアップを追加するコードの一部を追加しましょう。mapを使用した標準的な方法で実装します：

products/NewProductForm.jsxconst sellersList = sellers.map((seller) => (
  <option key={seller.id} value={seller.id}>
    {seller.name}
  </option>
))

そして、実際のマークアップに変更を加えます。 そのために、フォーム内の最初と2番目の段落（製品名と製品説明のマークアップブロックの間）に、以下のマークアップを含む段落を挿入します：

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">Seller:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

これで、アプリケーションを起動できます。 追加フォームに販売者のリストが表示されるようになりました。フォームにデータを入力し、その中から1人を選択して、保存ボタンをクリックしてみましょう。Redux DevToolsを確認すると、変更が確認できます - 新しく追加された製品には、sellerプロパティが追加され、値として選択した販売者のidが設定されています。また、Stateタブにはproductsとsellersの2つのスライスが表示されるようになりました。