/ / Đơn giản hóa việc quản lý trạng thái trong React

Đơn giản hóa việc quản lý trạng thái trong React

featured image for react native article

Quản lý trạng thái rất quan trọng trong quá trình phát triển React, đóng vai trò là nền tảng để xử lý và cập nhật dữ liệu trong giao diện người dùng. phản ứng của sử dụngState Hook cung cấp một cách tiếp cận đơn giản để quản lý trạng thái, nhưng nó trở nên cồng kềnh với trạng thái phức tạp. Đó là nơi sử dụngReducer Móc đi vào.


Các sử dụngReducer Hook cung cấp một phương pháp có cấu trúc để quản lý các trạng thái và quá trình chuyển đổi phức tạp. Ôm lấy sử dụngReducer Hook mở ra tính linh hoạt và hiệu quả, dẫn đến mã sạch hơn.


Hiểu về useReducer Hook

Các sử dụngReducer Hook là một tính năng sẵn có được cung cấp bởi React giúp hợp lý hóa việc quản lý trạng thái bằng cách tuân thủ các nguyên tắc của mẫu bộ giảm tốc. Nó cung cấp cho bạn một giải pháp thay thế có tổ chức và có thể mở rộng cho sử dụngState Hook, đặc biệt thích hợp để xử lý các trạng thái phức tạp.

Bằng cách tận dụng sử dụngReducer Hook, bạn có thể hợp nhất cả trạng thái và quá trình chuyển đổi của nó trong một hàm giảm tốc duy nhất.

Hàm này lấy trạng thái hiện tại và một hành động làm đầu vào, sau đó tạo ra trạng thái mới. Nó hoạt động trên các nguyên tắc giống như hàm rút gọn được sử dụng trong JavaScript Array.prototype.reduce() phương pháp.

Cú pháp và ví dụ Cách sử dụng useReducer Hook

Cú pháp để sử dụng các sử dụngReducer Móc như sau:

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

Các sử dụngReducer hàm chấp nhận hai đối số:

  • bộ giảm tốc (chức năng): Xác định cách cập nhật trạng thái dựa trên trạng thái hiện tại và hành động đã gửi.
  • ban đầuState (bất kỳ): Đại diện cho giá trị trạng thái ban đầu cho thành phần.

Khi gọi, các sử dụngReducer Hook trả về một mảng bao gồm hai phần tử:

  • trạng thái (bất kỳ): Biểu thị giá trị trạng thái hiện tại.
  • công văn (chức năng): Chức năng này cho phép gửi các hành động để cập nhật trạng thái.

Xem xét ví dụ dưới đây minh họa việc sử dụng sử dụngReducer Móc trong việc quản lý một bộ đếm đơn giản:

 import React, { useReducer } from 'react';
const initialState = 0;

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

const Counter = () => {
  const [count, dispatch] = useReducer(reducer, initialState);
  const handleIncrement = () => {
    dispatch({ type: 'increment' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'decrement' });
  };

  return (
    <div>
      <button onClick={handleIncrement}>Increment</button>
      <span>{count}</span>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );

};

Từ hình minh họa trên, một trạng thái ban đầu của 0 được định nghĩa cùng với hàm rút gọn chịu trách nhiệm xử lý hai loại hành động: tănggiảm bớt. Hàm giảm tốc sửa đổi hợp lệ trạng thái theo các hành động được chỉ định.

Bằng cách tận dụng sử dụngReducer Hook, trạng thái được khởi tạo và cả giá trị trạng thái hiện tại và hàm điều phối đều được lấy. Chức năng điều phối sau đó được sử dụng để kích hoạt cập nhật trạng thái khi nhấp vào các nút tương ứng.

Xây dựng hàm rút gọn

Để sử dụng tối ưu các sử dụngReducer Hook, bạn có thể tạo một hàm rút gọn mô tả cách cập nhật trạng thái dựa trên các hành động đã gửi. Hàm rút gọn này chấp nhận trạng thái hiện tại và hành động làm đối số và trả về trạng thái mới.

Thông thường, hàm rút gọn sử dụng câu lệnh điều kiện chuyển đổi để xử lý các loại hành động khác nhau và thực hiện các sửa đổi trạng thái tương ứng.

Xem xét ví dụ bên dưới về hàm rút gọn được sử dụng để quản lý danh sách việc cần làm:

 const initialState = [];

const reducer = (state, action) => {
  switch (action.type) {
    case 'add':
      return [...state, action.payload];
    case 'toggle':
      return state.map((todo) =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'delete':
      return state.filter((todo) => todo.id !== action.payload);
    default:
      return state;
  }
};

Trong ví dụ trên, hàm rút gọn xử lý ba loại hành động riêng biệt: thêm vào, chuyển đổixóa bỏ. Khi nhận được thêm vào hành động, nó nối tải trọng (một mục công việc mới) vào tình trạng mảng.

trong trường hợp của chuyển đổi hành động, nó thay thế các hoàn thành thuộc tính của mục việc cần làm được liên kết với ID đã chỉ định. Các xóa bỏ mặt khác, hành động loại bỏ mục việc cần làm được liên kết với ID được cung cấp khỏi mảng trạng thái.

Nếu không có loại hành động nào tương ứng, hàm rút gọn sẽ trả về trạng thái hiện tại không thay đổi.

Hành động điều phối

Để thực hiện các cập nhật trạng thái được hỗ trợ bởi sử dụngReducer Hook, việc điều phối các hành động trở nên không thể thiếu. Các hành động đại diện cho các đối tượng JavaScript đơn giản làm sáng tỏ loại sửa đổi trạng thái mong muốn.

Trách nhiệm xử lý các hành động này và tạo trạng thái tiếp theo thuộc về chức năng giảm tốc.

Chức năng điều phối, được cung cấp bởi sử dụngReducer Hook, được sử dụng để gửi các hành động. Nó chấp nhận một đối tượng hành động làm đối số, do đó kích hoạt cập nhật trạng thái thích hợp.

Trong các ví dụ trước, các hành động được gửi đi bằng cú pháp công văn ({type: ‘actionType’}). Tuy nhiên, có thể hình dung các hành động bao gồm dữ liệu bổ sung, được gọi là khối hàng, cung cấp thêm thông tin chi tiết liên quan đến bản cập nhật. Ví dụ:

 dispatch({ type: 'add', payload: { id: 1, text: 'Finish homework', completed: false } }); 

Trong kịch bản này, các thêm vào hành động bao gồm một đối tượng tải trọng gói gọn các chi tiết của mục việc cần làm mới được tích hợp vào trạng thái.

Quản lý trạng thái phức tạp với useReducer

Sức mạnh thực sự của sử dụngReducer Hook nằm ở khả năng quản lý các cấu trúc trạng thái phức tạp, bao gồm nhiều giá trị được kết nối với nhau và các chuyển đổi trạng thái phức tạp.

Bằng cách tập trung logic trạng thái trong một chức năng giảm tốc, việc quản lý các loại hành động đa dạng và cập nhật trạng thái một cách có hệ thống trở thành một nỗ lực khả thi.

Hãy xem xét một kịch bản trong đó một biểu mẫu phản ứng bao gồm nhiều trường đầu vào. Thay vì quản lý từng trạng thái đầu vào riêng lẻ thông qua sử dụngStatecác sử dụngReducer Hook có thể được sử dụng để quản lý toàn diện trạng thái biểu mẫu.

Hàm rút gọn có thể xử lý thành thạo các hành động liên quan đến việc sửa đổi các trường cụ thể và xác thực toàn diện toàn bộ biểu mẫu.

 const initialState = {
  name: '',
  email: '',
  password: '',
  isFormValid: false,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'updateField':
      return { ...state, [action.payload.field]: action.payload.value };
    case 'validateForm':
      return { ...state, isFormValid: action.payload };
    default:
      return state;
  }
};

Trong ví dụ, hàm rút gọn phục vụ cho hai loại hành động riêng biệt: cập nhậtFieldxác thựcForm. Các cập nhậtField hành động tạo điều kiện sửa đổi một trường cụ thể trong trạng thái bằng cách sử dụng giá trị được cung cấp.

Ngược lại, các xác thựcForm hành động cập nhật các isFormValid thuộc tính dựa trên kết quả xác thực được cung cấp.

Bằng cách sử dụng các sử dụngReducer Móc để quản lý trạng thái biểu mẫu, tất cả các trạng thái và hành động liên quan được hợp nhất trong một thực thể duy nhất, do đó nâng cao tính dễ hiểu và bảo trì.

So sánh useReducer với các giải pháp quản lý trạng thái khác

Mặc dù sử dụngReducer Hook là một công cụ mạnh mẽ để quản lý trạng thái, điều quan trọng là phải thừa nhận những điểm khác biệt và sự đánh đổi của nó khi so sánh với các giải pháp quản lý trạng thái thay thế trong hệ sinh thái React.

sử dụngState

Các sử dụngState Móc đủ để quản lý các trạng thái đơn giản, biệt lập trong một thành phần. Cú pháp của nó ngắn gọn và đơn giản hơn so với sử dụngReducer. Tuy nhiên, đối với các chuyển đổi trạng thái hoặc trạng thái phức tạp, sử dụngReducer cung cấp một cách tiếp cận có tổ chức hơn.

chuyển hướng

Redux đại diện cho một thư viện quản lý trạng thái nổi bật cho các ứng dụng React. Nó tuân thủ một mô hình giảm tốc tương tự như sử dụngReducerchưa cung cấp các tính năng bổ sung như cửa hàng tập trung, hỗ trợ phần mềm trung gian và gỡ lỗi du hành thời gian.

Redux tỏ ra lý tưởng cho các ứng dụng quy mô lớn đòi hỏi các yêu cầu quản lý trạng thái phức tạp. Tuy nhiên, đối với các dự án nhỏ hơn hoặc nhu cầu quản lý trạng thái đơn giản hơn, sử dụngReducer có thể phục vụ như một sự thay thế nhẹ và đơn giản hơn.

API ngữ cảnh

React’s Context API cho phép chia sẻ trạng thái trên nhiều thành phần mà không cần dùng đến prop Drilling. Kết hợp với sử dụngReducernó có thể mang lại một giải pháp quản lý nhà nước tập trung.

Trong khi sự kết hợp của Context API và sử dụngReducer tự hào có sức mạnh đáng kể, nó có thể gây ra sự phức tạp bổ sung khi được đặt cạnh nhau với việc sử dụng useReducer một cách riêng biệt.

API ngữ cảnh được sử dụng tốt nhất khi cần chia sẻ trạng thái giữa các thành phần được lồng sâu hoặc khi đối mặt với hệ thống phân cấp thành phần phức tạp. Việc lựa chọn một giải pháp quản lý nhà nước phù hợp phụ thuộc vào các yêu cầu cụ thể của ứng dụng hiện tại.

Đối với các dự án có quy mô vừa phải, sử dụngReducer có thể chứng minh là một giải pháp thay thế hiệu quả và đơn giản hơn cho Redux hoặc API ngữ cảnh.

Giải phóng sự đơn giản của quản lý nhà nước

UseReducer Hook là một công cụ mạnh để đơn giản hóa việc quản lý trạng thái trong các ứng dụng React. Bằng cách tuân thủ các nguyên tắc của mẫu bộ giảm tốc, nó cung cấp một cách tiếp cận có cấu trúc và khả năng mở rộng để xử lý các chuyển đổi trạng thái và trạng thái phức tạp.

Khi được sử dụng song song với useState Hook, useReducer có thể phục vụ như một giải pháp thay thế nhẹ cho các thư viện như Redux hoặc API ngữ cảnh, đặc biệt trong ngữ cảnh của các dự án vừa và nhỏ.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *