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处理状态，localStorage处理持久性，这有两个不同的概念。这是有关why redux的更多信息。

希望有帮助！

Answer 2

redux存储是一个内存存储，因此一旦您重新加载页面，数据就会消失，为避免这种情况，您可以使用redux-persist之类的东西，或者简单地在根组件上删除，将孔状态保存在诸如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存储数据，则其中的任何更改变量（状态）将显示在您使用其值的组件中。

页面加载时如何在Redux中存储数据？

4 个答案: