1 tháng 9, 2025Tiếng Việt

Khám phá hook useActionState của React để quản lý trạng thái hiệu quả, được kích hoạt bởi các hành động bất đồng bộ. Nâng cao hiệu suất và trải nghiệm người dùng.

Triển khai React useActionState: Quản lý Trạng thái Dựa trên Hành động

Hook useActionState của React, được giới thiệu trong các phiên bản gần đây, cung cấp một cách tiếp cận tinh tế để quản lý các cập nhật trạng thái xuất phát từ các hành động bất đồng bộ. Công cụ mạnh mẽ này giúp đơn giản hóa quá trình xử lý các thay đổi dữ liệu (mutations), cập nhật giao diện người dùng (UI), và quản lý các trạng thái lỗi, đặc biệt khi làm việc với React Server Components (RSC) và server actions. Hướng dẫn này sẽ khám phá sâu hơn về useActionState, cung cấp các ví dụ thực tế và các phương pháp triển khai tốt nhất.

Hiểu về Nhu cầu Quản lý Trạng thái Dựa trên Hành động

Quản lý trạng thái React truyền thống thường bao gồm việc quản lý các trạng thái tải (loading) và lỗi một cách riêng biệt trong các component. Khi một hành động (ví dụ: gửi biểu mẫu, lấy dữ liệu) kích hoạt một cập nhật trạng thái, các lập trình viên thường quản lý các trạng thái này bằng nhiều lệnh gọi useState và có thể là logic điều kiện phức tạp. useActionState cung cấp một giải pháp gọn gàng và tích hợp hơn.

Hãy xem xét một kịch bản gửi biểu mẫu đơn giản. Nếu không có useActionState, bạn có thể có:

Một biến trạng thái cho dữ liệu biểu mẫu.
Một biến trạng thái để theo dõi xem biểu mẫu có đang được gửi hay không (trạng thái tải).
Một biến trạng thái để lưu trữ bất kỳ thông báo lỗi nào.

Cách tiếp cận này có thể dẫn đến mã dài dòng và có khả năng không nhất quán. useActionState hợp nhất những vấn đề này vào một hook duy nhất, đơn giản hóa logic và cải thiện khả năng đọc mã.

Giới thiệu về useActionState

Hook useActionState chấp nhận hai đối số:

Một hàm bất đồng bộ ("hành động") thực hiện cập nhật trạng thái. Đây có thể là một server action hoặc bất kỳ hàm bất đồng bộ nào.
Một giá trị trạng thái ban đầu.

Nó trả về một mảng chứa hai phần tử:

Giá trị trạng thái hiện tại.
Một hàm để gửi (dispatch) hành động. Hàm này tự động quản lý các trạng thái tải và lỗi liên quan đến hành động đó.

Đây là một ví dụ cơ bản:


import { useActionState } from 'react';

async function updateServer(prevState, formData) {
  // Mô phỏng một cập nhật máy chủ bất đồng bộ.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     return 'Failed to update server.';
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

Trong ví dụ này:

updateServer là hành động bất đồng bộ mô phỏng việc cập nhật máy chủ. Nó nhận trạng thái trước đó và dữ liệu biểu mẫu.
useActionState khởi tạo trạng thái với 'Initial State' và trả về trạng thái hiện tại cùng với hàm dispatch.
Hàm handleSubmit gọi dispatch với dữ liệu biểu mẫu. useActionState tự động xử lý các trạng thái tải và lỗi trong quá trình thực thi hành động.

Xử lý Trạng thái Tải và Lỗi

Một trong những lợi ích chính của useActionState là khả năng quản lý tích hợp các trạng thái tải và lỗi. Hàm dispatch trả về một promise sẽ được giải quyết với kết quả của hành động. Nếu hành động ném ra một lỗi, promise sẽ bị từ chối với lỗi đó. Bạn có thể sử dụng điều này để cập nhật UI một cách tương ứng.

Sửa đổi ví dụ trước để hiển thị thông báo tải và thông báo lỗi:


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Mô phỏng một cập nhật máy chủ bất đồng bộ.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      const result = await dispatch(formData);
      console.log(result);
    } catch (error) {
      console.error("Error during submission:", error);
      setErrorMessage(error.message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Name:
      
      
      {isSubmitting && Loading...}
      {errorMessage && Error: {errorMessage}}
      State: {state}
    
  );
}

Các thay đổi chính:

Chúng tôi đã thêm các biến trạng thái isSubmitting và errorMessage để theo dõi trạng thái tải và lỗi.
Trong handleSubmit, chúng tôi đặt isSubmitting thành true trước khi gọi dispatch và bắt bất kỳ lỗi nào để cập nhật errorMessage.
Chúng tôi vô hiệu hóa nút gửi trong khi đang gửi và hiển thị các thông báo tải và lỗi một cách có điều kiện.

useActionState với Server Actions trong React Server Components (RSC)

useActionState tỏa sáng khi được sử dụng với React Server Components (RSC) và server actions. Server actions là các hàm chạy trên máy chủ và có thể trực tiếp thay đổi nguồn dữ liệu. Chúng cho phép bạn thực hiện các hoạt động phía máy chủ mà không cần viết các điểm cuối API.

Lưu ý: Ví dụ này yêu cầu một môi trường React được cấu hình cho Server Components và Server Actions.


// app/actions.js (Server Action)
'use server';

import { cookies } from 'next/headers'; //Ví dụ, cho Next.js

export async function updateName(prevState, formData) {
  const name = formData.get('name');

  if (!name) {
    return 'Please enter a name.';
  }

  try {
    // Mô phỏng cập nhật cơ sở dữ liệu.
    await new Promise(resolve => setTimeout(resolve, 1000));

    cookies().set('userName', name);

    return `Updated name to: ${name}`; //Thành công!

  } catch (error) {
    console.error("Database update failed:", error);
    return 'Failed to update name.'; // Quan trọng: Trả về một thông báo, không ném ra Lỗi
  }
}


// app/page.jsx (React Server Component)
'use client';

import { useActionState } from 'react';
import { updateName } from './actions';

function MyComponent() {
  const [state, dispatch] = useActionState(updateName, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

export default MyComponent;

Trong ví dụ này:

updateName là một server action được định nghĩa trong app/actions.js. Nó nhận trạng thái trước đó và dữ liệu biểu mẫu, cập nhật cơ sở dữ liệu (mô phỏng), và trả về một thông báo thành công hoặc lỗi. Điều quan trọng là hành động trả về một thông báo thay vì ném ra một lỗi. Server Actions ưu tiên trả về các thông báo có ý nghĩa.
Component được đánh dấu là client component ('use client') để sử dụng hook useActionState.
Hàm handleSubmit gọi dispatch với dữ liệu biểu mẫu. useActionState tự động quản lý việc cập nhật trạng thái dựa trên kết quả của server action.

Những Lưu ý Quan trọng đối với Server Actions

Xử lý lỗi trong Server Actions: Thay vì ném lỗi, hãy trả về một thông báo lỗi có ý nghĩa từ Server Action của bạn. useActionState sẽ coi thông báo này là trạng thái mới. Điều này cho phép xử lý lỗi một cách mượt mà trên client.
Cập nhật lạc quan (Optimistic Updates): Server actions có thể được sử dụng với các cập nhật lạc quan để cải thiện hiệu suất cảm nhận. Bạn có thể cập nhật UI ngay lập tức và hoàn tác nếu hành động thất bại.
Xác thực lại (Revalidation): Sau một lần thay đổi dữ liệu thành công, hãy xem xét việc xác thực lại dữ liệu đã được cache để đảm bảo UI phản ánh trạng thái mới nhất.

Các Kỹ thuật Nâng cao với useActionState

1. Sử dụng Reducer cho các Cập nhật Trạng thái Phức tạp

Đối với logic trạng thái phức tạp hơn, bạn có thể kết hợp useActionState với một hàm reducer. Điều này cho phép bạn quản lý các cập nhật trạng thái một cách có thể dự đoán và dễ bảo trì.


import { useActionState } from 'react';
import { useReducer } from 'react';

const initialState = {
  count: 0,
  message: 'Initial State',
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

async function updateState(state, action) {
  // Mô phỏng hoạt động bất đồng bộ.
  await new Promise(resolve => setTimeout(resolve, 500));

  switch (action.type) {
    case 'INCREMENT':
      return reducer(state, action);
    case 'DECREMENT':
      return reducer(state, action);
    case 'SET_MESSAGE':
      return reducer(state, action);
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateState, initialState);

  return (
    
      Count: {state.count}
      Message: {state.message}
      
      
      
    
  );
}

2. Cập nhật Lạc quan với useActionState

Cập nhật lạc quan cải thiện trải nghiệm người dùng bằng cách cập nhật ngay lập tức giao diện người dùng như thể hành động đã thành công, và sau đó hoàn tác cập nhật nếu hành động thất bại. Điều này có thể làm cho ứng dụng của bạn cảm thấy phản hồi nhanh hơn.


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Mô phỏng một cập nhật máy chủ bất đồng bộ.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [name, setName] = useState('Initial Name');
  const [state, dispatch] = useActionState(async (prevName, newName) => {
    try {
      const result = await updateServer(prevName, {
        name: newName,
      });
      return newName; // Cập nhật khi thành công
    } catch (error) {
      // Hoàn tác khi có lỗi
      console.error("Update failed:", error);
      setName(prevName);
      return prevName;
    }
  }, name);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newName = formData.get('name');
    setName(newName); // Cập nhật UI một cách lạc quan
    await dispatch(newName);
  }

  return (
    
      Name:
      
      
      Current Name: {name}
      State: {state}
    
  );
}

3. Debounce (Trì hoãn) các Hành động

Trong một số trường hợp, bạn có thể muốn debounce các hành động để ngăn chúng được gửi đi quá thường xuyên. Điều này có thể hữu ích cho các kịch bản như ô nhập tìm kiếm, nơi bạn chỉ muốn kích hoạt một hành động sau khi người dùng đã ngừng gõ trong một khoảng thời gian nhất định.


import { useActionState } from 'react';
import { useState, useEffect } from 'react';

async function searchItems(prevState, query) {
  // Mô phỏng tìm kiếm bất đồng bộ.
  await new Promise(resolve => setTimeout(resolve, 500));

  return `Search results for: ${query}`;
}

function MyComponent() {
  const [query, setQuery] = useState('');
  const [state, dispatch] = useActionState(searchItems, 'Initial State');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (query) {
        dispatch(query);
      }
    }, 300); // Debounce trong 300ms

    return () => clearTimeout(timeoutId);
  }, [query, dispatch]);

  return (
    
      Search:
       setQuery(e.target.value)}
      />
      State: {state}
    
  );
}

Các Phương pháp Tốt nhất cho useActionState

Giữ cho Hành động Thuần khiết: Đảm bảo các hành động của bạn là các hàm thuần khiết (hoặc gần như vậy). Chúng không nên có tác dụng phụ nào khác ngoài việc cập nhật trạng thái.
Xử lý lỗi một cách mượt mà: Luôn xử lý lỗi trong các hành động của bạn và cung cấp thông báo lỗi có ý nghĩa cho người dùng. Như đã lưu ý ở trên với Server Actions, hãy ưu tiên trả về một chuỗi thông báo lỗi từ server action, thay vì ném ra một lỗi.
Tối ưu hóa Hiệu suất: Hãy chú ý đến các tác động về hiệu suất của các hành động của bạn, đặc biệt khi xử lý các tập dữ liệu lớn. Cân nhắc sử dụng các kỹ thuật ghi nhớ (memoization) để tránh các lần render lại không cần thiết.
Cân nhắc về Khả năng tiếp cận: Đảm bảo ứng dụng của bạn vẫn có thể truy cập được bởi tất cả người dùng, bao gồm cả những người khuyết tật. Cung cấp các thuộc tính ARIA và điều hướng bằng bàn phím phù hợp.
Kiểm thử Kỹ lưỡng: Viết các bài kiểm thử đơn vị (unit tests) và kiểm thử tích hợp (integration tests) để đảm bảo các hành động và cập nhật trạng thái của bạn hoạt động chính xác.
Quốc tế hóa (i18n): Đối với các ứng dụng toàn cầu, hãy triển khai i18n để hỗ trợ nhiều ngôn ngữ và văn hóa.
Bản địa hóa (l10n): Tùy chỉnh ứng dụng của bạn cho các địa phương cụ thể bằng cách cung cấp nội dung, định dạng ngày tháng và ký hiệu tiền tệ đã được bản địa hóa.

useActionState so với các Giải pháp Quản lý Trạng thái Khác

Mặc dù useActionState cung cấp một cách tiện lợi để quản lý các cập nhật trạng thái dựa trên hành động, nó không phải là sự thay thế cho tất cả các giải pháp quản lý trạng thái. Đối với các ứng dụng phức tạp có trạng thái toàn cục cần được chia sẻ qua nhiều component, các thư viện như Redux, Zustand, hoặc Jotai có thể phù hợp hơn.

Khi nào nên sử dụng useActionState:

Cập nhật trạng thái có độ phức tạp từ đơn giản đến trung bình.
Cập nhật trạng thái gắn liền chặt chẽ với các hành động bất đồng bộ.
Tích hợp với React Server Components và Server Actions.

Khi nào nên cân nhắc các giải pháp khác:

Quản lý trạng thái toàn cục phức tạp.
Trạng thái cần được chia sẻ qua một số lượng lớn các component.
Các tính năng nâng cao như gỡ lỗi du hành thời gian (time-travel debugging) hoặc middleware.

Kết luận

Hook useActionState của React cung cấp một cách mạnh mẽ và thanh lịch để quản lý các cập nhật trạng thái được kích hoạt bởi các hành động bất đồng bộ. Bằng cách hợp nhất các trạng thái tải và lỗi, nó đơn giản hóa mã và cải thiện khả năng đọc, đặc biệt khi làm việc với React Server Components và server actions. Hiểu rõ điểm mạnh và hạn chế của nó cho phép bạn chọn đúng phương pháp quản lý trạng thái cho ứng dụng của mình, dẫn đến mã dễ bảo trì và hiệu quả hơn.

Bằng cách tuân theo các phương pháp tốt nhất được nêu trong hướng dẫn này, bạn có thể tận dụng hiệu quả useActionState để nâng cao trải nghiệm người dùng và quy trình phát triển ứng dụng của mình. Hãy nhớ xem xét độ phức tạp của ứng dụng và chọn giải pháp quản lý trạng thái phù hợp nhất với nhu cầu của bạn. Từ việc gửi biểu mẫu đơn giản đến các thay đổi dữ liệu phức tạp, useActionState có thể là một công cụ có giá trị trong kho vũ khí phát triển React của bạn.