Pada saat menulis ini saya baru sadar, kenapa tidak materi Hooks terlebih dahulu saya tulis kemudian redux, tapi yasudahlah, anggap saja ini seperti movie dengan alur maju mundur.
React Hooks
Sejak react versi 16.8, hooks diperkenalkan sehingga component dengan function memiliki akses ke state dan lifecycle secara sederhananya.
useState
useState adalah cara menggunakan state pada react hooks, cara penggunaannya sangat simple dengan mendeklarasikan array untuk menyimpan data dan untuk pengubahnya.
const [hitung, updateHitung] = useState(0);
Penggunaannya seperti berikut.
import React, { useState } from "react";
const Perhitungan = () => {
const [hitung, updateHitung] = useState(0);
return (
<div>
{hitung}
<button onClick={() => updateHitung(hitung + 1)}> Tambah 1</button>
</div>
);
};
useRef
Hooks useRef digunakan untuk membuat pointer atau referensi terhadap elemen DOM.
Cara penggunaannya.
import React, { useState, useRef } from "react";
const Perhitungan = () => {
const inputRef = useRef(null);
return (
<div>
<label>Input:</label>
<input type="text" ref={inputRef} placeholder="Asrul Dev" />
<button
onClick={() => {
const element = inputRef.current;
element.focus();
}}
>
Fokuskan!
</button>
</div>
);
};
useEffect / lifeCycle Hooks
useEffect digunakan sebagai pengganti lifeCycle pada react versi class component.
Sebagai componentDidMount, jika parameter kedua adalah array kosong.
useEffect(() => {
console.log("Mounted Yah:)");
}, []);
Sebagai componentWillMount adalah apasaja yang direturn pada useEffect.
useEffect(() => {
console.log("Mounted Yah:)");
return () => {
console.log("Will UnMount Yah :(");
};
}, []);
useEffect dijalankan jika props berubah.
useEffect(() => {
console.log("Mounted Yah:)");
}, [props.nilaiAwal]);
Jalankan jika state berubah.
useEffect(() => {
console.log("Hitung terapdet");
}, [hitung]);
Konsum Redux
Sebelumnya kita telah membahas redux. Sempat terhenti karena ada materi penting yang harus dipahami sebelum konsum redux, yaitu Hooks pada react. Sekarang setelah kita bahas tentang Hooks, maka materi ini barulah bisa lanjut kembali.
Pada file pages/Home.js konsums redux dengan mengubah kode menjadi seperti berikut.
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUsers } from "../actions/user.action";
const Home = (props) => {
const dispatch = useDispatch();
const usersData = useSelector((state) => state.users);
useEffect(() => {
dispatch(getUsers());
}, []);
return (
<div className="page">
<h1 className="page-title">Member 30 Hari Js</h1>
{usersData.isLoading && <h1>Loading ....</h1>}
{usersData.isError && <h1>Error Data ....</h1>}
<div className="users">
{!usersData.isError &&
usersData.data.length > 0 &&
usersData.data.map((user, index) => (
<div className="user" key={index}>
<div className="user-img-container">
<img src={user.picture} alt={user.picture} />
</div>
<div className="user-detail">
<h3> {user.name} </h3>
</div>
</div>
))}
</div>
</div>
);
};
export default Home;
Penggunaan map baca disini
Kemudia poles sedikt dengan mengubah css agar tampilan lebih menarik, sehingga file App.css menjadi seperti berikut.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: green;
width: 100%;
height: 40px;
}
body nav li {
margin-right: 2rem;
}
body nav li a {
color: white;
}
body nav li a:hover {
color: yellow;
}
body main {
padding: 3rem;
color: gray;
}
.page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.page .page-title {
color: black;
text-align: center;
margin-bottom: 1rem;
}
.page .users {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.page .users .user {
width: 25%;
border: 1px green solid;
margin-right: 1rem;
}
.page .users .user:nth-child(4n) {
margin-right: 0;
}
.page .users .user .user-img-container img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.page .users .user .user-detail h3 {
text-align: center;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
Hasil nya akan menjadi seperti berikut.
