Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về useReducer, một hook trong ReactJS, cách sử dụng nó và tại sao nó lại quan trọng.

Khái niệm về useReducer

useReducer là một hook trong ReactJS giúp chúng ta quản lý state phức tạp hơn so với useState. Nó cho phép chúng ta cập nhật state dựa trên logic của reducer function.

Cách sử dụng useReducer

Để sử dụng useReducer, chúng ta cần khai báo như sau:

const [state, dispatch] = useReducer(reducer, initialState);

Trong đó:

• state là giá trị hiện tại của state.
• dispatch là hàm cho phép chúng ta gửi (dispatch) các action để cập nhật state.
• reducer là hàm xử lý logic cập nhật state.
• initialState là giá trị khởi tạo cho state.

Ví dụ về useReducer

Dưới đây là một ví dụ đơn giản về cách sử dụng useReducer:

import React, { useReducer } from 'react';

const initialState = 0;

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

export default Counter;

Trong ví dụ trên, chúng ta tạo một component Counter đơn giản với hai nút tăng và giảm giá trị. Khi nhấn vào mỗi nút, chúng ta sẽ gửi một action tương ứng để cập nhật giá trị của state.

Tại sao nên sử dụng useReducer

useReducer rất hữu ích khi chúng ta cần quản lý state phức tạp, đặc biệt là khi state mới phụ thuộc vào state cũ. Nó cũng giúp chúng ta tách biệt logic cập nhật state ra khỏi component, giúp code dễ đọc và dễ bảo dưỡng hơn.

Hy vọng qua bài viết này, các bạn đã hiểu rõ hơn về useReducer và cách sử dụng nó trong ReactJS. Hãy tiếp tục thực hành để nắm vững kiến thức nhé!