Redux-Persist 是一個函式庫，它的主要功能是將 Redux store 中的狀態持久化到本地儲存（如瀏覽器的 localStorage 或sessionStorage）。這意味著，即使使用者重新載入頁面或關閉瀏覽器，應用程式的狀態仍然能夠被保留不會不見，這樣提供了更好的使用者體驗。

1.Redux-Persist 的工作原理：

1. 配置： 在應用程式啟動時，配置 Redux-Persist，指定要持久化的狀態、儲存位置（localStorage 或 sessionStorage）以及其他選項。
2. 監聽： Redux-Persist 會監聽 Redux store 的變化。
3. 儲存： 每當 store 的狀態發生變化時，Redux-Persist 會將最新的狀態序列化後儲存到指定的儲存位置。
4. 恢復： 當應用程式啟動時，Redux-Persist 會從儲存位置讀取之前儲存的狀態，並將其反序列化後注入到 Redux store 中。

使用場景

• 購物車： 儲存使用者加入購物車的商品資訊，即使關閉瀏覽器，商品資訊仍然存在。
• 表單資料： 儲存未提交的表單資料，防止使用者填寫的資料丟失。

2.安裝 Redux-Persist：

npm install @reduxjs/toolkit react-redux
npm install redux-persist

3. 配置 Redux Store：

在 Redux Store 配置文件中（如 store.js），引入並配置 Redux-Persist。也要確保 whitelist 中的 reducer 名稱與 combineReducers 中的鍵一致。例如，addToSchedules 對應於 addToScheduleReducer。

import storage from 'redux-persist/lib/storage'; // 使用 localStorage
import { persistReducer, persistStore } from 'redux-persist';

// 定義 persist 配置
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['favorites', 'schedule', 'addToSchedules'], // 需要持久化的 reducer
};

const rootReducer = combineReducers({
    favorites: favoritesReducer,
    schedule: scheduleReducer,
    addToSchedules: addToScheduleReducer,
    // 其他 reducers
  });
// 包裝 rootReducer 為 persistReducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
  export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
            // 忽略 redux-persist 的動作
            ignoredActions: ['persist/PERSIST'],
        },
    }).concat(thunk),
  });

// 創建 persistor
export const persistor = persistStore(store);

// export const persistor = persistStore(store);
export default store;

4.在外層包住Redux-Persist：

在應用入口文件（通常是 index.js 或 App.js）中，使用 PersistGate 來包裹你的應用，以確保在載入持久化的狀態之前不會渲染 UI。

import { Provider } from 'react-redux';
import { ConfigProvider } from "antd";
import store, { persistor } from "./components/redux/store";
import { PersistGate } from 'redux-persist/integration/react';

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          <ConfigProvider>
            <NavigationButton />
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="places/id/:placeId" element={<Place />} />
              <Route path="/favorite" element={<Favorite />} />
              <Route path="/schedule" element={<Schedule />} />
              <Route path="/schedule/:scheduleId" element={<ScheduleDetailPage />} />
              <Route path="/map" element={<Map />} />
            </Routes>
          </ConfigProvider>
        </BrowserRouter>
      </PersistGate>


    </Provider>

  );
}

5.總結：

通過本文的教學，你應該能夠成功地在 React 應用中配置和使用 Redux-Persist 來持久化 Redux 狀態。以下是主要步驟的回顧：

1. 安裝 Redux-Persist： 使用 npm 或 yarn 安裝。
2. 配置 Redux Store： 使用 persistReducer 包裝根 Reducer，並配置持久化選項。
3. 包裝應用程序： 在應用入口文件中使用 Provider 和 PersistGate。
4. 創建和配置 Redux Slice： 確保所有 Reducer 和選擇器正確配置。
5. 處理常見問題： 針對導入錯誤和狀態訪問錯誤進行調試和修正。

確保每一步都正確無誤，並使用 Redux DevTools 進行狀態檢查和調試。如果然遇到問題，請仔細檢查每個步驟，並確認所有配置和導入路徑是否正確。 Redux DevTools 是一個常見的除錯debug工具，下一篇我們會來介紹他!那今天就先到這邊，希望這篇教學對各位有幫助!