Máy Trạng Thái Hook Tùy Chỉnh trong React: Nắm Vững Trừu Tượng Hóa Logic Trạng Thái Phức Tạp

Khi các ứng dụng React ngày càng phức tạp, việc quản lý trạng thái có thể trở thành một thách thức đáng kể. Các phương pháp truyền thống sử dụng `useState` và `useEffect` có thể nhanh chóng dẫn đến logic rối rắm và mã khó bảo trì, đặc biệt khi xử lý các chuyển đổi trạng thái và tác dụng phụ phức tạp. Đây là lúc máy trạng thái, và cụ thể là các React custom hook triển khai chúng, phát huy tác dụng. Bài viết này sẽ hướng dẫn bạn về khái niệm máy trạng thái, minh họa cách triển khai chúng dưới dạng custom hook trong React và trình bày những lợi ích chúng mang lại để xây dựng các ứng dụng có khả năng mở rộng và dễ bảo trì cho đối tượng toàn cầu.

Máy Trạng Thái là gì?

Máy trạng thái (hay máy trạng thái hữu hạn, FSM) là một mô hình tính toán toán học mô tả hành vi của một hệ thống bằng cách định nghĩa một số hữu hạn các trạng thái và các chuyển đổi giữa các trạng thái đó. Hãy hình dung nó giống như một sơ đồ luồng, nhưng với các quy tắc chặt chẽ hơn và một định nghĩa chính thức hơn. Các khái niệm chính bao gồm:

• Trạng thái: Đại diện cho các điều kiện hoặc giai đoạn khác nhau của hệ thống.
• Chuyển đổi: Xác định cách hệ thống di chuyển từ trạng thái này sang trạng thái khác dựa trên các sự kiện hoặc điều kiện cụ thể.
• Sự kiện: Các tác nhân kích hoạt gây ra các chuyển đổi trạng thái.
• Trạng thái ban đầu: Trạng thái mà hệ thống bắt đầu.

Máy trạng thái nổi trội trong việc mô hình hóa các hệ thống với các trạng thái được xác định rõ ràng và các chuyển đổi rõ ràng. Các ví dụ rất nhiều trong các tình huống thực tế:

• Đèn giao thông: Chuyển đổi qua các trạng thái như Đỏ, Vàng, Xanh, với các chuyển đổi được kích hoạt bởi bộ hẹn giờ. Đây là một ví dụ được công nhận trên toàn cầu.
• Xử lý đơn hàng: Một đơn hàng thương mại điện tử có thể chuyển qua các trạng thái như "Đang chờ", "Đang xử lý", "Đã giao hàng" và "Đã nhận". Điều này áp dụng phổ biến cho bán lẻ trực tuyến.
• Luồng xác thực: Một quy trình xác thực người dùng có thể bao gồm các trạng thái như "Đã đăng xuất", "Đang đăng nhập", "Đã đăng nhập" và "Lỗi". Các giao thức bảo mật nhìn chung nhất quán giữa các quốc gia.

Tại sao sử dụng Máy Trạng Thái trong React?

Việc tích hợp máy trạng thái vào các thành phần React của bạn mang lại một số lợi thế hấp dẫn:

• Cải thiện tổ chức mã: Máy trạng thái thực thi một cách tiếp cận có cấu trúc để quản lý trạng thái, làm cho mã của bạn dễ đoán và dễ hiểu hơn. Không còn mã spaghetti!
• Giảm độ phức tạp: Bằng cách định nghĩa rõ ràng các trạng thái và chuyển đổi, bạn có thể đơn giản hóa logic phức tạp và tránh các tác dụng phụ không mong muốn.
• Tăng cường khả năng kiểm thử: Máy trạng thái vốn có khả năng kiểm thử. Bạn có thể dễ dàng xác minh rằng hệ thống của mình hoạt động chính xác bằng cách kiểm thử từng trạng thái và chuyển đổi.
• Tăng khả năng bảo trì: Bản chất khai báo của máy trạng thái giúp việc sửa đổi và mở rộng mã của bạn dễ dàng hơn khi ứng dụng của bạn phát triển.
• Trực quan hóa tốt hơn: Có các công cụ có thể trực quan hóa máy trạng thái, cung cấp cái nhìn tổng quan rõ ràng về hành vi của hệ thống, hỗ trợ cộng tác và hiểu biết giữa các nhóm với các bộ kỹ năng đa dạng.

Triển khai Máy Trạng Thái dưới dạng React Custom Hook

Hãy minh họa cách triển khai máy trạng thái bằng cách sử dụng React custom hook. Chúng ta sẽ tạo một ví dụ đơn giản về một nút có thể ở ba trạng thái: `idle` (rảnh rỗi), `loading` (đang tải) và `success` (thành công). Nút bắt đầu ở trạng thái `idle`. Khi nhấp vào, nó chuyển sang trạng thái `loading`, mô phỏng quá trình tải (sử dụng `setTimeout`), và sau đó chuyển sang trạng thái `success`.

1. Định nghĩa Máy Trạng Thái

Đầu tiên, chúng ta định nghĩa các trạng thái và chuyển đổi của máy trạng thái nút của chúng ta:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Sau 2 giây, chuyển sang success
      },
    },
    success: {},
  },
};

Cấu hình này sử dụng một cách tiếp cận độc lập với thư viện (mặc dù được lấy cảm hứng từ XState) để định nghĩa máy trạng thái. Chúng ta sẽ tự triển khai logic để diễn giải định nghĩa này trong custom hook. Thuộc tính `initial` đặt trạng thái ban đầu là `idle`. Thuộc tính `states` định nghĩa các trạng thái có thể (`idle`, `loading` và `success`) và các chuyển đổi của chúng. Trạng thái `idle` có thuộc tính `on` định nghĩa một chuyển đổi sang trạng thái `loading` khi một sự kiện `CLICK` xảy ra. Trạng thái `loading` sử dụng thuộc tính `after` để tự động chuyển sang trạng thái `success` sau 2000 mili giây (2 giây). Trạng thái `success` là một trạng thái cuối cùng trong ví dụ này.

2. Tạo Custom Hook

Bây giờ, hãy tạo custom hook triển khai logic máy trạng thái:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Dọn dẹp khi unmount hoặc thay đổi trạng thái
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Hook `useStateMachine` này nhận định nghĩa máy trạng thái làm đối số. Nó sử dụng `useState` để quản lý trạng thái hiện tại và ngữ cảnh (chúng ta sẽ giải thích ngữ cảnh sau). Hàm `transition` nhận một sự kiện làm đối số và cập nhật trạng thái hiện tại dựa trên các chuyển đổi được định nghĩa trong định nghĩa máy trạng thái. Hook `useEffect` xử lý thuộc tính `after`, thiết lập bộ hẹn giờ để tự động chuyển sang trạng thái tiếp theo sau một khoảng thời gian xác định. Hook trả về trạng thái hiện tại, ngữ cảnh và hàm `transition`.

3. Sử dụng Custom Hook trong một Thành phần

Cuối cùng, hãy sử dụng custom hook trong một thành phần React:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Sau 2 giây, chuyển sang success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Thành phần này sử dụng hook `useStateMachine` để quản lý trạng thái của nút. Hàm `handleClick` gửi sự kiện `CLICK` khi nút được nhấp (và chỉ khi nó ở trạng thái `idle`). Thành phần hiển thị văn bản khác nhau dựa trên trạng thái hiện tại. Nút bị vô hiệu hóa trong khi tải để ngăn chặn nhiều lần nhấp.

Xử lý Ngữ cảnh (Context) trong Máy Trạng Thái

Trong nhiều tình huống thực tế, máy trạng thái cần quản lý dữ liệu tồn tại xuyên suốt các chuyển đổi trạng thái. Dữ liệu này được gọi là ngữ cảnh (context). Ngữ cảnh cho phép bạn lưu trữ và cập nhật thông tin liên quan khi máy trạng thái tiến triển.

Hãy mở rộng ví dụ về nút của chúng ta để bao gồm một bộ đếm tăng lên mỗi khi nút tải thành công. Chúng ta sẽ sửa đổi định nghĩa máy trạng thái và custom hook để xử lý ngữ cảnh.

1. Cập nhật Định nghĩa Máy Trạng Thái

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Chúng ta đã thêm thuộc tính `context` vào định nghĩa máy trạng thái với giá trị `count` ban đầu là 0. Chúng ta cũng đã thêm một hành động `entry` vào trạng thái `success`. Hành động `entry` được thực thi khi máy trạng thái vào trạng thái `success`. Nó nhận ngữ cảnh hiện tại làm đối số và trả về một ngữ cảnh mới với `count` được tăng lên. `entry` ở đây cho thấy một ví dụ về việc sửa đổi ngữ cảnh. Vì các đối tượng Javascript được truyền bằng tham chiếu, điều quan trọng là phải trả về một đối tượng *mới* thay vì thay đổi đối tượng gốc.

2. Cập nhật Custom Hook

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Dọn dẹp khi unmount hoặc thay đổi trạng thái
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Chúng ta đã cập nhật hook `useStateMachine` để khởi tạo trạng thái `context` bằng `stateMachineDefinition.context` hoặc một đối tượng rỗng nếu không có ngữ cảnh nào được cung cấp. Chúng ta cũng đã thêm một `useEffect` để xử lý hành động `entry`. Khi trạng thái hiện tại có hành động `entry`, chúng ta thực thi nó và cập nhật ngữ cảnh bằng giá trị được trả về.

3. Sử dụng Hook đã Cập nhật trong một Thành phần

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

Bây giờ chúng ta truy cập `context.count` trong thành phần và hiển thị nó. Mỗi khi nút tải thành công, bộ đếm sẽ tăng lên.

Các Khái niệm Nâng cao về Máy Trạng Thái

Mặc dù ví dụ của chúng ta tương đối đơn giản, máy trạng thái có thể xử lý các tình huống phức tạp hơn nhiều. Dưới đây là một số khái niệm nâng cao cần xem xét:

• Guards (Điều kiện bảo vệ): Các điều kiện phải được đáp ứng để một chuyển đổi xảy ra. Ví dụ, một chuyển đổi chỉ có thể được cho phép nếu người dùng đã được xác thực hoặc nếu một giá trị dữ liệu nhất định vượt quá ngưỡng.
• Actions (Hành động): Các tác dụng phụ được thực thi khi vào hoặc rời khỏi một trạng thái. Chúng có thể bao gồm thực hiện các cuộc gọi API, cập nhật DOM hoặc gửi các sự kiện đến các thành phần khác.
• Parallel States (Các trạng thái song song): Cho phép bạn mô hình hóa các hệ thống có nhiều hoạt động đồng thời. Ví dụ, một trình phát video có thể có một máy trạng thái cho các điều khiển phát lại (phát, tạm dừng, dừng) và một máy khác để quản lý chất lượng video (thấp, trung bình, cao).
• Hierarchical States (Các trạng thái phân cấp): Cho phép bạn lồng các trạng thái bên trong các trạng thái khác, tạo ra một hệ thống phân cấp các trạng thái. Điều này có thể hữu ích để mô hình hóa các hệ thống phức tạp với nhiều trạng thái liên quan.

Các Thư viện Thay thế: XState và hơn thế nữa

Mặc dù custom hook của chúng ta cung cấp một triển khai cơ bản về máy trạng thái, một số thư viện tuyệt vời có thể đơn giản hóa quá trình và cung cấp các tính năng nâng cao hơn.

XState

XState là một thư viện JavaScript phổ biến để tạo, diễn giải và thực thi máy trạng thái và biểu đồ trạng thái (statecharts). Nó cung cấp một API mạnh mẽ và linh hoạt để định nghĩa các máy trạng thái phức tạp, bao gồm hỗ trợ guards, actions, parallel states và hierarchical states. XState cũng cung cấp các công cụ tuyệt vời để trực quan hóa và gỡ lỗi máy trạng thái.

Các Thư viện Khác

Các tùy chọn khác bao gồm:

• Robot: Một thư viện quản lý trạng thái nhẹ với trọng tâm là sự đơn giản và hiệu suất.
• react-automata: Một thư viện được thiết kế đặc biệt để tích hợp máy trạng thái vào các thành phần React.

Việc lựa chọn thư viện phụ thuộc vào nhu cầu cụ thể của dự án của bạn. XState là một lựa chọn tốt cho các máy trạng thái phức tạp, trong khi Robot và react-automata phù hợp cho các tình huống đơn giản hơn.

Các Thực hành Tốt nhất khi Sử dụng Máy Trạng Thái

Để tận dụng hiệu quả máy trạng thái trong các ứng dụng React của bạn, hãy xem xét các thực hành tốt nhất sau:

• Bắt đầu nhỏ: Bắt đầu với các máy trạng thái đơn giản và dần dần tăng độ phức tạp khi cần thiết.
• Trực quan hóa Máy Trạng Thái của bạn: Sử dụng các công cụ trực quan hóa để có được sự hiểu biết rõ ràng về hành vi của máy trạng thái của bạn.
• Viết các bài kiểm thử toàn diện: Kiểm thử kỹ lưỡng từng trạng thái và chuyển đổi để đảm bảo hệ thống của bạn hoạt động chính xác.
• Tài liệu hóa Máy Trạng Thái của bạn: Tài liệu rõ ràng về các trạng thái, chuyển đổi, guards và actions của máy trạng thái của bạn.
• Xem xét Quốc tế hóa (i18n): Nếu ứng dụng của bạn nhắm đến đối tượng toàn cầu, hãy đảm bảo rằng logic máy trạng thái và giao diện người dùng của bạn được quốc tế hóa đúng cách. Ví dụ, sử dụng các máy trạng thái hoặc ngữ cảnh riêng biệt để xử lý các định dạng ngày hoặc ký hiệu tiền tệ khác nhau dựa trên ngôn ngữ của người dùng.
• Khả năng tiếp cận (a11y): Đảm bảo rằng các chuyển đổi trạng thái và cập nhật giao diện người dùng của bạn có thể truy cập được đối với người dùng khuyết tật. Sử dụng các thuộc tính ARIA và HTML ngữ nghĩa để cung cấp ngữ cảnh và phản hồi phù hợp cho các công nghệ hỗ trợ.

Kết luận

Các React custom hook kết hợp với máy trạng thái cung cấp một cách tiếp cận mạnh mẽ và hiệu quả để quản lý logic trạng thái phức tạp trong các ứng dụng React. Bằng cách trừu tượng hóa các chuyển đổi trạng thái và tác dụng phụ thành một mô hình được xác định rõ ràng, bạn có thể cải thiện tổ chức mã, giảm độ phức tạp, tăng cường khả năng kiểm thử và tăng khả năng bảo trì. Dù bạn triển khai custom hook của riêng mình hay tận dụng một thư viện như XState, việc tích hợp máy trạng thái vào quy trình làm việc React của bạn có thể cải thiện đáng kể chất lượng và khả năng mở rộng của ứng dụng cho người dùng trên toàn thế giới.