页面加载时如何在 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 存储数据，则该变量中的任何更改（状态) 将显示在您使用其值的组件中。