- vừa được xem lúc

Chuyển từ useState sang useReducer trong React Hooks

0 0 24

Người đăng: kentrung

Theo Viblo Asia

useStateuseReducer đều là các React Hooks cho phép quản lý state trong ứng dụng của bạn. useState thường quản lý những state đơn lẻ trong khi useReducer thì mạnh mẽ hơn trong việc quản lý các state phức tạp, nhiều logic xử lý, ngoài ra nó giúp tách biệt giữa UI và logic ra những phần riêng biệt để developer dễ theo dõi, maintain.

Để chuyển từ useState sang useReducer bạn cần follow theo các bước sau:

  • Xác định giá trị state ban đầu initialState và các kiểu action action type
  • Tạo một reducer function nhận vào state và action, tùy vào action mà xử lý trả về state tương ứng.
  • Bên ngoài UI component ta thay thế useState bằng useReducer
  • useReducer nhận vào reducer function ở trên và initialState
  • useReducer trả về state và hàm dispatch, hàm dispatch để xác định sẽ thực hiện action gì

1. useState cơ bản

import React, { useState } from 'react' const Counter = () => { const [count, setCount] = useState(0) const handleIncrement = () => setCount(count + 1) return ( <> <p>Count: {count}</p> <button onClick={handleIncrement}>Increment</button> </> )
} export default Counter

2. Sử dụng useReducer

2-1. Khai báo initialState và action type

const initialState = { count: 0 }
const INCREMENT = 'increment'

2-2. Thay useState bằng useReducer

import React, { useReducer } from 'react' const Counter = () => { const [state, dispatch] = useReducer(reducer, initialState) // ...
}

2-3. Tạo reducer function

const reducer = (state, action) => { switch (action.type) { case INCREMENT: return { count: state.count + 1 } default: return state }
}

2-4. Sử dụng ngoài UI component

const Counter = () => { const [state, dispatch] = useReducer(reducer, initialState); const handleIncrement = () => dispatch({ type: INCREMENT }) return ( <> <p>Count: {state.count}</p> <button onClick={handleIncrement}>Increment</button> </> );
}

Ở bước 4

  • dispatch function gửi một action đến reducer function.
  • reducer function nhận action đó và kiểm tra.
  • Tùy thuộc vào action type sẽ xử lý và trả về state mới.
  • Khi state thay đổi thì ngoài UI component cũng sẽ tự động thay đổi theo.

3. Kết luận

Trong ví dụ đơn giản trên, useReducer không mang lại nhiều lợi ích hơn useState (thậm chí còn rối rắm hơn). Nhưng nói chung, khi các thành phần của bạn trở nên phức tạp, useReducer cung cấp một cách mạnh mẽ và linh hoạt để quản lý state, đặc biệt là khi bạn có những state phức tạp, nhiều logic xử lý, giúp tách biệt UI và logic rõ ràng.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 101

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 128

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 60

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 55

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 52

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 81