Reduxにおけるフォームとローカルステート

過去のレッスンでは、storeからデータを取得し、 Reactコンポーネント内で表示する方法を学びました。このレッスンでは、新しいデータを追加する作業に取り掛かります。フォームを使用してこれを行い、販売者が新しい商品を追加できるようにします。

まず、常にReduxのグローバルステートを使用する必要はないということから始めましょう。必要に応じてローカルステートを作成できる場合があります。ローカルステートとは、特定のコンポーネント内で技術的な目的のために使用されるステートを指します。例えば、ボタンで何かを非表示または表示するためなどです。

今回のケースでは、ユーザーがフォームにデータを入力します。そのため、当然この目的にはステートが必要になります。 Reduxのグローバルステートを使用することもできますが、このステートは商品追加フォームというアプリケーション内の一箇所でのみ機能するため、その必要はありません。これに従うべき主なルールは、ローカルステートが作成されたコンポーネントの外部で機能してはならず、決してstoreに関与してはならないということです。このような実践は、フォーム作成時によく用いられます。

それでは、商品管理アプリケーションのproductsフォルダを開き、その中にファイルNewProductForm.jsxを作成し、フックuseStateをインポートしましょう：

import { useState } from 'react'

次に、フォームを持つコンポーネント自体を作成し、以前Reactで行ったのと同様に、通常のステートを記述します。商品名、説明、価格、数量を扱うためのステートが必要です：

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

続いて、ユーザーがデータを入力する際の各フィールドに対する標準的な処理を追加します：

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

そして、コンポーネント内で見出しと空のフォームを含むレンダリングを返します：

return (
	<div>
		<h2>Add a New Product</h2>
		<form>
		</form>
	</div>
)

あなたの学生管理アプリケーションを開いてください。 studentsフォルダ内にファイルNewStudentForm.jsxを作成します。コンポーネントNewStudentFormに必要なフィールド用のローカルステートを用意し、レッスンで示したように各フィールドの処理を記述してください。

コンポーネントNewStudentForm内で、見出しと空のフォームを含むレンダリングを返してください。