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 lập trình viên lão luyện về framework luôn văng vẳng bên tai.
Muốn sử dụng được React hooks với redux ,chúng ta sẽ phải làm gì ?
trước tiên ta 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-app
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. 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 (
This is clicked {count} times! <div> <button onClick={onDecrement}>-</button> <button onClick={onIncrement}>+</button></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.
tham khảo HungHayHo via kipalog