自訂 React hook 以將狀態與 URL 同步

PHPz
發布: 2024-08-10 18:53:32
原創
885 人瀏覽過

Custom React hook to sync state with the URL

建立 React 應用程式時,在 URL 中反映狀態通常很有用。這不僅使狀態可共享,還允許用戶在不丟失上下文的情況下添加書籤或刷新頁面。在這篇文章中,我們將在 TypeScript 中建立一個名為 useParamState 的自訂 React 鉤子。這個鉤子的功能類似於 useState,但它也會將狀態與 URL 中的搜尋參數同步。重要的是,它將支援複雜的物件值。

為什麼要使用ParamState?

React Router 的 useSearchParams 鉤子非常適合管理 URL 搜尋參數,但將它們與元件狀態同步可能很麻煩。 useParamState 鉤子透過以下方式解決了這個問題:

  • 提供類似useState的簡單API。
  • 自動將狀態與 URL 搜尋參數同步。
  • 支援複雜類型,包括物件。

先決條件

  • 對 React、TypeScript 和 React Router 的基本了解。
  • 熟悉 useState 和 useEffect。

實作 useParamState

第 1 步:設定項目

(這假設你已經知道如何建立一個 React 項目,如果你不知道的話請前往 Vite)

確保你已經安裝了react-router-dom:

雷雷

步驟 2:useParamState 掛鉤

這是實作 useParamState 鉤子的方法:

雷雷

它是如何運作的

初始化:

該鉤子首先檢查 URL 中是否存在指定的搜尋參數。如果是,鉤子會解析它並將其用作初始狀態。否則,它會回退到提供的defaultValue。

狀態更新:

setParamState 函數會更新內部狀態和 URL 中的搜尋參數。它使用 JSON.stringify 來序列化狀態,讓我們在 URL 中儲存複雜的物件。

類型支援:

該鉤子透過利用 TypeScript 的泛型和 JSON 解析來支援各種類型(字串、數字、布林值和物件)。

第三步:使用useParamState

讓我們看看如何在 React 元件中使用 useParamState:

雷雷

第 4 步:測試 Hook

為了確保 useParamState 鉤子按預期工作,您可以使用 @testing-library/react 編寫單元測試:

雷雷

結論

useParamState 鉤子簡化了狀態與 URL 搜尋參數同步的過程,使您的 React 應用程式更加健壯且用戶友好。由於支援物件等複雜類型,此鉤子是一個強大的工具,用於管理需要在頁面重新載入時保留或透過 URL 共享的狀態。

您可以進一步擴展此鉤子以處理更複雜的資料結構,但對於大多數用例,此實作將滿足您的需求。

(請對文章發表評論,以便我可以做得更好並改進我可能犯的任何錯誤,提前感謝。)

其他平台也歡迎追蹤我

  • 領英

  • Github

  • Instagram

以上是自訂 React hook 以將狀態與 URL 同步的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!