頁面加載時如何在 Redux 中存儲數據？

Question

我對 React 和 Redux 框架很陌生，但是我能夠從 redux 存儲和抓取數據，而在手動刷新頁面時我無法抓取數據。 當時 React 和 Redux 狀態都是空白。

如果狀態為空白，我真的很困惑，為什么我們要使用 redux 而不是 localStorage / sessionStorage。

如果我做錯了什么，請幫助我。

非常感謝幫助。

Answer 1

您可以使用像redux-persist這樣的庫在瀏覽器上設置持久性。

https://github.com/rt2zz/redux-persist

編輯：

Redux 將數據存儲在內存中。 要將數據從 redux 持久化到 localStorage，然后在刷新時補充應用程序，您需要額外的處理。 redux-persist使這更容易。

redux 的主要原因是將應用程序的狀態與表示層（組件）解耦。 Redux 處理狀態，localStorage 處理持久性，這是兩個不同的概念。 這里有更多關於為什么 redux的主題。

希望有幫助！

Answer 2

redux 存儲是內存存儲，因此一旦您重新加載頁面，數據就會消失，因此為了避免這種情況，您可以使用諸如redux-persist類的東西，或者只是在根組件的 unmout 上將您的空洞狀態保存在像localstorage這樣的內存中，然后將其打開組件安裝

Answer 3

Redux 用於兩點

• 對於大型應用
• 為了更好的用戶體驗（您調用 api 一次，然后從 Redux 獲取數據，而不是再次調用 API）

Redux 更適合用於大型中型應用程序。 您也可以將 Redux 用於小型應用程序，但這不是必需的。 使用 Redux 的主要目的是在內存中正確管理數據。 當您的應用程序增長時，您需要將數據正確存儲在內存中。 如果數據發生變化，例如用戶名，並且它顯示在頁面的不同位置，那么在這種情況下，每個地方都從 Redux 獲取數據的新副本。 當您創建一個不同於小型應用程序的大型應用程序時，您將對 Redux 有更好的了解。 還要考慮一種情況，當您轉到“用戶”頁面時加載所有用戶列表，然后返回“主頁”頁面，然后再次轉到“用戶”頁面。 現在，如果您使用 Redux，您將只顯示 Store 中的數據，否則您必須再次加載數據。

Answer 4

正如@tony 所說，您可以使用 redux-persist 來存儲數據。 您還可以配置 redux-persist 將數據存儲在 localStorage 或 sessionStorage 中。 這是配置的樣子

import reducers from './reducer';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
key: 'root',
storage: storage,
stateReconciler: autoMergeLevel2
};
const pReducer = persistReducer(persistConfig, reducers);

我們直接在 localStorage/sessionStorage 上使用 redux-persist 是因為存儲在 localStorage/sessionStorage 中的變量的更改不會讓您的組件動態知道它，而如果您使用 redux-persist 存儲數據，則該變量中的任何更改（狀態) 將顯示在您使用其值的組件中。