Hooks trong ReactJS

1. useState trong React

useState là một hook cho phép chúng ta quản lý các state trong một functional component, Bằng cách gọi React.useState bên trong một functional compoenent, bạn đã có thể làm việc với state một cách nhanh chóng.

Để sử dụng useState, trước tiên chúng ta cần import nó vào component.

import React, { useState } from "react";

Tiếp theo, ta chỉ cần sử dụng useState bằng cú pháp:

const [nameState, funcUpdate] = React.useState(defaultState)

Ở đây chúng ta có 3 đối số cần chú ý đến:

• nameState: đây là gía trị mặc định của state.
• funcUpdate: function dùng để cập nhật state. Giả sử mình muốn cập nhật giá trị của state mình chỉ cần gọi funcUpdate('giá trị mới của state').
• defaultState: giá trị mặc định của state khi được khởi tạo lần đầu.

Khi bạn sử dung state trong một class component, state được khởi tạo đó luôn luôn là một object, chúng ta chỉ có thể lưu trữ giá trị trong object đó.

// Khởi tạo một state trong 
// class component
// Giá trị luôn là một object
this.state = {
  website: 'freetuts.net'
}

Nhưng với hooks, chúng ta có thể lưu trữ bất cứ kiểu dữ liệu nào trong state như object, number, string,….Khi bạn thực hiện gọi useState đồng nghĩa với nó là state đã được khởi tạo thành công.

// Khởi tạo state trong functional component
// sử dụng React hook: useState
 
//Khởi tạo state có kiểu dữ liệu là string
const [website, setWebsite] = React.useState('freetuts.net');
 
//Kiểu dữ liệu là boolean
const [isLoading, setLoading] = React.useState(false);
 
.....

2. useEffect trong React Hooks

useEffect là một hook trong React Hooks cho phép chúng ta làm việc với các life cycle ở functional component. Có thể hiểu đơn giản rằng useEffect Hook là của 3 phương thức componentDidMount, componentDidUpdate, vàcomponentWillUnmount kết hợp lại với nhau.

Lifecyle là một phần rất quan trọng trong một component. Trong một vài trường hợp chúng ta cần phải fetch data từ API khi component đã được render, hay thực hiện hành động nào đó khi một component được update. Bởi vậy có thể thấy rằng phương thức quan trọng và hay được sử dụng nhất trong lifce cycle đó là componentDidMount, componentDidUpdate.

Nhưng trong một functional component không thể làm việc với các life cycle này bằng cách thông thường, bởi vậy useEffect Hooks sinh ra để làm điều này.

useEffect cho phép chúng ta xử lý các logic trong các vòng đời của component và được gọi mỗi khi có bất cứ sự thay đổi nào trong một componnet.

Để sử dụng useEffect bạn cần phải import nó vào trong component cần sử dụng:

import React, { useEffect } from 'react'

và sử dụng nó bằng cú pháp:

useEffect(effectFunction, arrayDependencies)

trong đó arrayDependencies là một mảng các giá trị, khi giá trị trong mảng này thay đổi thì hàm effectFunction sẽ được gọi. Trước khi đi tiếp vào phần sau bạn có thể tham khảo thêm bài viết về Tìm hiểu về Life cycle trong ReactJS.

3. useSelector trong React Redux

Hook này cho phép chúng ta lấy state từ Redux store bằng cách sử dụng một selector function làm tham số đầu vào. Trong đoạn code phía trên bạn thấy thì mình có trả về mảng products từ store. Mặc dù nó thực hiện công việc như mapStateToProps nhưng nó vẫn có một số khác biệt mà bạn cần phải quan tâm.

• mapStateToProps chỉ return về 1 object, còn useSelector có thể return bất cứ giá trị nào
• Khi dispatch một action, useSelector sẽ thực hiện so sánh tham chiếu với giá trị được return trước đó và giá trị hiện tại. Nếu chúng khác nhau, component sẽ bị re-render. Nếu chúng giống nhau, component sẽ không re-render. mapStateToProps là một function sẽ luôn được chạy lại mỗi khi store có một sự thay đổi bất kì nào trong đó. Với mapStateToProps, tất cả các trường được return lại thành một dạng object kết hợp. Vậy nên mỗi khi mapStateToProps chạy thì nó sẽ return về một object với tham chiếu mới. Hàm connect() sẽ thực hiện so sánh nông với object mà mapStateToProps trả về, nếu khác nhau thì sẽ re-render lại component. Tức hiểu cặn kẽ hơn là so sánh tham chiếu (so sánh ===) các trường bên trong object mà mapStateToProps trả về, chỉ cần 1 trường khác nhau là sẽ bị coi là khác nhau.

Để sử dụng bạn cần phải import nó vào trong component cần sử dụng::

import { useSelector } from "react-redux";

và sau đó sử dụng nó:

const state = useSelector((state) => state);

4. useDispatch trong React Redux

Hook này đơn giản chỉ là return về một tham chiếu đến dispatch function từ Redux store và được sử dụng để dispatch các action.

Để sử dụng bạn cần phải import nó vào trong component cần sử dụng:

import { useDispatch } from "react-redux";

và sau đó sử dụng nó:

....
import { setAllUsers } from "./../../Redux/actions/UserActions";
....

const dispatch = useDispatch();
....
dispatch(setAllUsers(res.data.data));

UserActions.js:

export const setAllUsers = (users) => {
  return {
    type: "SET_ALL_USERS",
    payload: users,
  };
};

UserReducer.js:

const initialState = {
  users: [],

};
export const userReducer = (state = initialState, { type, payload }) => {
  switch (type) {

    case "SET_ALL_USERS":
      return { ...state, users: payload };

    default:
      return state;
  }
};