Form dan State Lokal di Redux

Pada pelajaran sebelumnya kita telah belajar mengambil data dari store dan menampilkannya di komponen React. Pada pelajaran ini kita akan memulai menambahkan data baru. Kita akan melakukannya menggunakan form, yang setelah diisi, penjual dapat menambahkan produk baru.

Mari mulai dengan fakta bahwa tidak selalu masuk akal menggunakan state global Redux. Ada kalanya kita untuk kebutuhan kita dapat membuat state lokal. State lokal akan kita sebut sebagai state yang digunakan di dalam komponen tertentu untuk kebutuhan teknis. Misalnya, untuk menyembunyikan atau menampilkan sesuatu dengan tombol.

Dalam kasus kita, pengguna akan memasukkan data ke dalam form dan, tentu saja, kita akan membutuhkan state untuk ini. Kita bisa menggunakan state global Redux, tetapi hal ini tidak masuk akal, karena state kita hanya akan bekerja di satu tempat aplikasi untuk form penambahan produk. Aturan utama yang perlu diikuti - state lokal tidak boleh bekerja di luar komponen tempat mereka dibuat, dan dalam hal apapun tidak boleh menyentuh store. Praktik seperti ini sering digunakan saat membuat form.

Mari buka folder products dari aplikasi kita dengan produk, buat di dalamnya file NewProductForm.jsx dan impor hook useState:

import { useState } from 'react'

Sekarang buat komponen form itu sendiri dan tulis di dalamnya state biasa, seperti yang kita lakukan sebelumnya di React. Kita butuh state untuk bekerja dengan nama, deskripsi, harga, dan jumlah produk:

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

Selanjutnya tambahkan penanganan standar untuk setiap field saat pengguna memasukkan data:

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)

Kemudian kembalikan dalam komponen markup dengan judul dan form kosong:

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

Buka aplikasi Anda dengan para siswa. Buat file NewStudentForm.jsx di folder students. Buat di dalam komponen NewStudentForm state lokal untuk field yang diperlukan, tulis untuk setiap field penanganannya, seperti yang ditunjukkan dalam pelajaran.

Kembalikan dalam komponen NewStudentForm markup yang berisi judul dan form kosong.