Reduxにおけるデータ編集フォーム
これで、store内のデータを変更するためのレデューサーができました。 このレッスンでは、製品データを編集できるフォームを作成します。
製品管理アプリケーションを開き、productsフォルダ内に
EditProductForm.jsxファイルを作成しましょう。
EditProductFormコンポーネントの作成は、
NewProductFormと同様ですが、いくつか異なる点があり、
それらについて説明します。したがって、
NewProductForm.jsxのコードをすべてコピーして、
作成したファイルEditProductForm.jsxに貼り付けてください。
それでは順を追って進めていきましょう。
インポートからnanoidを削除してください。ここではidを生成する必要はありません。
productAddedのインポートをproductUpdatedに置き換えてください。
ここでは、製品を追加するのではなく、更新するためのアクションを使用するからです。
次に、コンポーネント関数の名前をNewProductFormから
EditProductFormに変更します。
EditProductForm関数内でname、desc、
price、amountのローカルステートを設定する前に、
さらに数行のコードを追加しましょう。先ほど述べたように、
ここではidを生成する必要はありません。現在のタスクは、
編集対象の製品データからidを取得することです。
製品個別ページを作成したときにも同様のことを行いました。
では、useParamsフックを使用してidを取得し、
useSelectorフックを使用して必要な製品を見つけましょう
（ファイルの先頭で両方のフックをインポートすることを忘れないでください）：
let params = useParams()
const { productId } = params
const product = useSelector((state) =>
state.products.find((product) => product.id === productId)
)
その後、ローカルステートの宣言ブロックを変更します。 今回は、storeから取得した製品データを初期値として設定する必要があります。 最初のステートは次のようになります。残り3つも同じように変更してください：
const [name, setName] = useState(product.name)
useDispatchの変数を割り当てた後、
さらに一行コードを追加しましょう。今度はuseNavigateフックのためです。
ユーザーがフォームへの変更を保存した後、製品ページに戻るためにこれを使用します：
const navigate = useNavigate()
また、このフックをファイルの先頭でインポートします：
import { useNavigate, useParams } from 'react-router-dom'
次に、入力フィールドのハンドラーがあります。
その後、onSaveProductClick関数を修正する必要があります。
今回は、クリック時にproductUpdatedアクションを、
取得したidとオブジェクト形式の変更されたデータと共にディスパッチします。
その後、編集された製品のページに遷移するためにnavigateを追加します：
const onSaveProductClick = () => {
if (name && desc && price && amount) {
dispatch(
productUpdated({
id: productId,
name,
desc,
price,
amount,
})
);
navigate(`/products/${productId}`);
}
}
あとは、返されるJSX内の次の行を見つけるだけです：
<h2>Add a New Product</h2>
そして、次のように置き換えます：
<h2>Edit Product</h2>
生徒管理アプリケーションを開いてください。
NewStudentForm.jsxを参考に、EditStudentForm.jsxファイルを作成してください。
レッスンで示した通りに変更を加えてください。
