UFUK   UÇAR

Merhaba, bir önceki seriye devam ediyoruz. Şimdi de kullanıcı eklemeyi göreceğiz.

Eğer serinin ilk yazısını okumak istiyorsanız sizi şuraya alalım. En başından başlamanız daha doğru olur.

components klasörü bulunan modal klasörüne gidelim ve Modal.jsx dosyasını açalım. 

İlgili dosyalarımızı ve fonksiyonlarımızı import edelim.

import { useDispatch, useSelector } from 'react-redux'
import actions from '../../actions'

İlgili state lerimizi ve tanımlamalarımızı yapalım. 

let [name, setName] = useState('')
let [email, setEmail] = useState('')
let [username, setUsername] = useState('')
let [phone, setPhone] = useState('')

let dispatch = useDispatch()
let usersState = useSelector((state) => state.userReducer)

Her input umuza bu değerleri bağlayalım. Yani value ve onChange() değerlerini girelim. 

Ad soyad için aşağıdaki gibi olacak.

<div className="mb-3">

	<label htmlFor="name" className="col-form-label">
	  Ad Soyad:
	</label>
	
	<input
	  type="text"
	  className="form-control"
	  id="name"
	  value={name}
	  onChange={(e) => setName(e.target.value)}
	/>
</div>

Hadi diğerlerini siz yapın. Neredeyse aynı.

Serinin ilk yazısında, kaydet butonuna bir click event i atamışız. Adını da  handleUser() koymuşuz dikkat ederseniz.

<button

	type="button"
	className="btn btn-primary"
	onClick={() => handleAddUser()}
  >
	Kaydet
</button>

handleUser() fonksiyonumuzu tanımlayalım. 

let handleAddUser = () => {
    
	// State değerlerine göre yeni obje oluşturuyoruz. key ve value değeri
	// aynı  olduğu için kısa yazdık. 
	// Normalde şu şekilde de yazabiliriz. name: name, email: email 
	let newUser = {
	  id: usersState.data.length + 1,
	  name,
	  username,
	  email,
	  phone,
	}

	// action içerisinde yazdığımız addUser fonksiyonuna gönderiyoruz.
	dispatch(actions.addUser(newUser))

	// modal ı kapatıyoruz. 
	window.$('#exampleModal').modal('hide')

	// state değerlerini temizliyoruz. Böylelikle modal her açıldığında içerisi boş olacak.
	setName('')
	setEmail('')
	setUsername('')
	setPhone('')
}

Kullanıcı ekle butonuna basıldığında açılan modal içine değerleri girelim. 

Ben şu şekilde girdim. 

Bir sorun olmadıysa sayfamız son olarak şu şekilde görülmelidir. 

Eğer bir sorun ile karşılaştıysanız Modal.jsx dosyasının kodlarına burayı tıklayarak erişebilirsiniz.

Projenin tamamına ulaşmak için burayı tıklayabilirsiniz.

Evet, umarım anlaşılır olmuştur. 

Benden bu kadar..