Dùng React Hooks với Redux

Mở đầu

Gần đây React nâng cấp lên sử dụng Hooks thay vì sử dụng class component (hay stateful). Giờ đây thế giới của React sẽ chỉ còn khái niệm function component. Hooks được cộng đồng đón nhận rất hồ hởi và tớ cũng thế mặc dù lời cảnh báo của các dev lão luyện về framework luôn văng vẳng bên tai.

Thực lòng mà nói, tớ nghĩ Hooks giúp React quay lại con đường chính thống của Javascript thay vì sử dụng class để giả OOP. Đây cũng là một điều mà tớ rất thích khi đọc được trong cuốn “You don’t know js” của Kyle Simpson.

Anh chị em có thể hỏi rằng Nếu đã không còn stateful component nữa thì dùng Redux để làm gì nữa? và tớ hoàn toàn okay với việc anh chị em không dùng. Chỉ là công ty tớ có một lượng lớn code cũ (legacy code) viết bằng Redux cộng thêm với việc react-redux vừa cho ra bản 7.1.0 (5 ngày trước) hỗ trợ sử dụng Hooks nên tớ định sẽ build một thứ siêu nhỏ để học cái này.

Tớ sẽ build một cái counter cơ bản chỉ làm công việc là cộng và trừ. Với mấy thứ như thế này thì create-react-app luôn là tiện nhất. Nếu anh chị em nào chưa cài thì có thể cài bằng npm install --save create-react-app hoặc yarn add create-react-appp

###Bước 1: Viết counter bằng Redux truyền thống Đầu tiên là download code và cài đặt cơ bản. Bật cửa sổ terminal và copy-paste những dòng sau.

git clone https://github.com/hungHoangDang/redux-hooks.git
npm install
npm run start

Như anh chị em có thể thấy, hiện tại file Counter.js được viết theo cách cũ bằng class component. Sử dụng HOC connect của react-redux để nhận state và actions thông qua hai hàm là mapStateToProps (hay mapState cho gọn) và mapDispatchToProps. Nếu bạn chưa nắm rõ phần này, hãy tham khảo tại đây nhé. Tớ nghĩ đây là một tut rất hay về Redux.

###Bước 2: Chuyển qua Redux hooks Giờ chúng ta hãy bắt đầu viết lại counter bằng hooks. Thực ra hooks cho redux khá đơn giản một khi bạn đã thành thạo React Hooks. Nếu chưa hãy giành chút thời gian tại đây nhé. Tớ chưa thấy đâu giải thích hook dễ hiểu như chính document của React. Chúng ta sẽ dùng useSelector thay cho mapStateToProps và useDispatch thay mapDispatchToProps Toàn bộ thay đổi chỉ có trong Counter.js như bên dưới:

import React from "react";
import { useSelector, useDispatch } from 'react-redux';
import "./Counter.css";

function Counter0() {
  const count = useSelector(state => state);
  const dispatch = useDispatch();

  const onIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  }

  const onDecrement = () => {
    dispatch({ type: 'DECREMENT' })
  }

  return (
    <div className="Counter">
      This is clicked {count} times!
      <div>
        <button onClick={onDecrement}>-</button>
        <button onClick={onIncrement}>+</button>
      </div>
    </div>
  );
}

export default Counter0;

##Kết luận Khi sử dụng Hooks trong Redux, anh chị em nên giành chút thời gian đọc documentation của react-redux vì bản thân useSelector sẽ có những khác biệt với HOC connect. Ngoài ra stale props và zombie children là 2 trường hợp gây ra bug được cộng đồng thảo luận nhiều mà anh chị em cũng cần biết.

HungHayHo 16-06-2019