在製作專案時，我選擇了 Jotai 作為狀態管理的解決方案。Jotai 是一個輕量級的狀態管理庫，簡單易用。這邊我稍微做一下對於此專案的過程紀錄，對於操作他的 API 的使用方式。它的 API 設計簡單直觀，主要提供以下功能：

• 建立 atom：在 Jotai 中，狀態是由 atom 來定義的。你可以通過 atom 函數來建立一個 atom，例如 const countAtom = atom(0);，這個 atom 就像是一個可以在應用程式中共享的全域變數。

• 使用 atom：要在 React 組件中使用 atom，可以透過 Jotai 提供的 useAtom Hook。例如，const [count, setCount] = useAtom(countAtom); 可以在組件內部讀取和更新 atom 的值。

• 元件內寫入 atom：透過 useAtom Hook，我們可以直接更新 atom 的值，像是呼叫 setCount(newCount) 來改變 atom 的狀態，這樣的改變會在使用該 atom 的所有組件中同步更新。

• 元件內讀取 atom：同樣地，我們也可以使用 useAtom 來讀取 atom 的當前值，這使得在 React 組件中存取狀態變得非常容易。

• JotaiProvider 為元件處理 Atom 作用域：Jotai 提供 JotaiProvider 組件來定義 atom 的作用域，這樣可以確保不同部分的應用程式中使用的 atom 不會互相干擾。它有助於在大型應用中組織和隔離狀態。

使用情境與問題解決

案例一：登入/註冊表單的狀態切換

在我的專案中，有一個頁面同時包含登入和註冊表單。這兩個表單是透過狀態切換來控制顯示與隱藏的。為了實現這個功能，我使用了一個 formTypeAtom 來儲存當前顯示的表單類型（例如：'sign-in' 或 'sign-up'）。在組件中，我使用 useAtom(formTypeAtom) 來讀取和更新表單類型，並根據當前的 atom 狀態來顯示相應的表單。這樣的設計不僅簡化了狀態管理的邏輯，也讓狀態的變更更加直觀和易於維護。

案例二：網址搜尋功能的狀態管理

在搜尋功能中，我使用了一個 searchTermAtom 來儲存搜尋字串。當用戶在搜尋框中輸入內容時，這個 atom 的狀態會立即更新，而其他依賴於 searchTermAtom 的組件會自動重新渲染，顯示與搜尋字串匹配的結果。例如，我在 SearchBar 組件中使用 useAtom(searchTermAtom) 來獲取和更新搜尋字串，而在 SearchResults 組件中也使用相同的 atom 來讀取當前的搜尋狀態，從而動態顯示符合條件的結果。

搜尋功能實作步驟
1.建立 Jotai 資料夾：在 Next.js 專案的 src 目錄下，建立一個名為 jotai 的資料夾，用來存放所有與 Jotai 有關的設定和 atom。

2.建立 atom：在 jotai 資料夾中，建立一個檔案命名為 search.ts，並定義一個 atom 來儲存搜尋字串。以下是 search.ts 的範例代碼：

import { atom } from "jotai";

// 定義一個 atom，初始值為空字串
export const searchText = atom("");

3.在 page.tsx 中使用 atom：接下來，我們需要在頁面或組件中使用這個 atom。首先，在需要使用搜尋功能的頁面中引入 useAtom 和 searchText：

import { useAtom } from "jotai";
import { searchText } from "@/jotai/search";

const SearchPage = () => {
    // 使用 useAtom Hook 來讀取和更新搜尋字串
    const [searchTerm, setSearchTerm] = useAtom(searchText);

    return (
        <div>
            <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="搜尋..."
            />
            <p>目前的搜尋字串: {searchTerm}</p>
        </div>
    );
};

export default SearchPage;