26. useReducer trong React JS

useReducer là một React Hook cho phép bạn quản lý trạng thái phức tạp hơn bằng cách sử dụng mô hình “reducer”. Mô hình này tương tự như cách bạn quản lý trạng thái trong Redux. useReducer thường được sử dụng khi bạn có nhiều hành động gây ra sự thay đổi trong trạng thái và bạn muốn tạo một hàm reducer để xác định cách trạng thái thay đổi dựa trên hành động đó. Dưới đây là một ví dụ về cách sử dụng useReducer:

jsx

import React, { useReducer } from 'react';

// Hàm reducer xác định cách trạng thái thay đổi dựa trên hành động
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

function Counter() {
  // Khởi tạo trạng thái ban đầu và hàm reducer
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

Trong ví dụ trên, chúng ta định nghĩa một hàm counterReducer để xác định cách trạng thái count thay đổi dựa trên hành động. Sau đó, chúng ta sử dụng useReducer để khởi tạo trạng thái ban đầu và hàm dispatch để gửi hành động đến reducer.

Khi người dùng nhấn vào nút “Increment” hoặc “Decrement”, chúng ta gửi một hành động tương ứng với reducer thông qua dispatch. Reducer sẽ xử lý hành động và trả về trạng thái mới. state được cập nhật tự động sau mỗi lần dispatch.

useReducer thích hợp cho các trường hợp phức tạp hơn khi bạn cần quản lý nhiều hành động gây ra sự thay đổi trạng thái và muốn tách logic quản lý trạng thái ra khỏi component chính. Trên đây là phần giới thiệu về useReducer trong React JS.