useReducerlà một trong những hook cơ bản trong React cho phép quản lý state của ứng dụng một cách linh hoạt và hiệu quả hơn. Nó giúp giảm thiểu sự phức tạp khi quản lý state và cung cấp cho chúng ta một cách tiếp cận mới để xử lý các trạng thái phức tạp trong ứng dụng React.
cách sử dụng useReducer trong React Js
Để sử dụng useReducer trong React, chúng ta cần định nghĩa một hàm reducer để quản lý state và trả về giá trị mới khi có action được gửi đến. Sau đó, chúng ta sử dụng hook useReducer để khởi tạo state ban đầu và gọi reducer để cập nhật state.
Ví dụ, ta có thể khai báo state và reducer như sau:
const initialState = { count: 0 };
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
Sau đó, chúng ta sử dụng hook useReducer để khởi tạo state và gọi reducer để cập nhật state:
import React, { useReducer } from 'react';
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
Trong ví dụ trên, chúng ta sử dụng hook useReducer để khởi tạo state ban đầu là { count: 0 }, và gọi reducer để cập nhật state khi có action được gửi đến. Trong component, chúng ta sử dụng dispatch để gửi action đến reducer và thay đổi state.
Cách sử dụng useReducer trong React là một cách tiếp cận linh hoạt và hiệu quả để quản lý state trong ứng dụng React. Nó giúp giảm thiểu sự phức tạp khi quản lý state và cung cấp cho chúng ta một cách tiếp cận mới để xử lý các trạng thái phức tạp trong ứng dụng React.
Kết luận và bài viết có liên quan
useReducer sử dụng một hàm reducer để thay đổi giá trị của state và trả về giá trị mới. Hàm reducer nhận vào hai tham số là state hiện tại và action được gửi đến từ component, sau đó nó sẽ xử lý action đó và trả về một state mới.
