Dùng React Hooks với Redux
TIL
720
White

HungHayHo viết ngày 16/06/2019

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 stateactions 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 mapStateToPropsuseDispatch 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 propszombie 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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

HungHayHo

8 bài viết.
2 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
3 0
Log 1 1. At the beginning of the chapter, the role of function is emphasized and two ways of creating a function are introduced: function declarat...
HungHayHo viết hơn 1 năm trước
3 0
White
3 0
Log 2 1. Phần đầu chap này hứa rằng mình sẽ biết một vài 'common coding idioms' và hai khái niệm anonymous function và closure được nhấn mạnh. Ano...
HungHayHo viết hơn 1 năm trước
3 0
White
2 0
Log 3 This is not the first time I read about Object Construction but last time was so brief that now I can barely recall anything except a metaph...
HungHayHo viết hơn 1 năm trước
2 0
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 7 tháng trước
2 0
White
22 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 3 năm trước
22 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
2 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!