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

我对React和Redux框架非常陌生，但是我能够从Redux存储和获取数据，而在手动刷新页面时我无法获取数据。当时，React和Redux状态为空

我真的很困惑，如果状态为空，那么为什么我们将使用redux而不是localStorage/sessionStorage

如果我做错了什么，请帮助我

---

非常感谢您的帮助。

您可以使用类似于

redux persist

的库在浏览器上设置持久性

编辑：

Redux将数据存储在内存中。要将数据从redux持久化到localStorage，然后在刷新时添加应用程序，您需要额外的处理

redux persist

使这更容易

redux的主要原因是将应用程序的状态与表示层（组件）解耦。Redux处理状态，localStorage处理持久性这两个不同的概念。这里有更多关于这个问题的信息

---

希望有帮助

您可以使用类似于

redux persist

的库在浏览器上设置持久性

编辑：

Redux将数据存储在内存中。要将数据从redux持久化到localStorage，然后在刷新时添加应用程序，您需要额外的处理

redux persist

使这更容易

redux的主要原因是将应用程序的状态与表示层（组件）解耦。Redux处理状态，localStorage处理持久性这两个不同的概念。这里有更多关于这个问题的信息

---

希望有帮助

redux store是内存中的存储，因此，一旦重新加载页面，数据将消失，因此为了避免这种情况，您可以使用

redux persist

之类的方法，或者只需在卸载根组件时将洞状态保存在内存中，如

localstorage

，然后在安装组件时将其获取重新加载页面时，数据将消失，因此为了避免出现这种情况，您可以使用类似于

redux persist

的方法，或者只需在卸载根组件时将洞状态保存在内存中，如

localstorage

，并在安装组件时获取洞状态

redux用于两点

• 适用于大型应用
• 为了获得更好的用户体验（您只需调用一次api，然后从Redux获取数据，而不是再次调用api）

Redux优先用于大中型应用程序。您也可以在小型应用程序中使用Redux，但这不是必需的。使用Redux的主要目的是正确管理内存中的数据。当应用程序增长时，需要将数据正确地存储在内存中。如果数据（例如用户名）发生了变化，并且显示在页面的不同位置，则在这种情况下，每个位置都从Redux获取数据的新副本。 当您创建一个与小型应用程序不同的大型应用程序时，您将对Redux有更好的了解。

---

还考虑了一个案例，当你去“用户”页面加载你所有的用户列表，然后你回到“首页”页面，然后再去“用户”页面。现在，如果您正在使用Redux，您只需显示存储中的数据，否则您必须再次加载数据。

Redux用于两点

• 适用于大型应用
• 为了获得更好的用户体验（您只需调用一次api，然后从Redux获取数据，而不是再次调用api）

Redux优先用于大中型应用程序。您也可以在小型应用程序中使用Redux，但这不是必需的。使用Redux的主要目的是正确管理内存中的数据。当应用程序增长时，需要将数据正确地存储在内存中。如果数据（例如用户名）发生了变化，并且显示在页面的不同位置，则在这种情况下，每个位置都从Redux获取数据的新副本。 当您创建一个与小型应用程序不同的大型应用程序时，您将对Redux有更好的了解。

---

还考虑了一个案例，当你去“用户”页面加载你所有的用户列表，然后你回到“首页”页面，然后再去“用户”页面。现在，如果您使用的是Redux，您只需显示存储中的数据，否则您必须再次加载数据。

正如@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存储数据，则会在该变量（state）中保留任何更改将显示在您使用其值的组件中。

正如@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存储数据，则会在该变量（state）中保留任何更改将显示在您使用其值的组件中。

重新加载页面时，应用程序的状态将丢失。Redux不像localStorage那样是持久性存储。这只是为了更好地管理应用程序的状态。重新加载页面时，应用程序的状态将丢失。Redux不像localStorage那样是持久性存储。这只是为了更好地管理应用程序的状态。感谢您的帮助。我检查了您的参考链接“redux persist”，但据我所知，它作为本地存储工作。如果是的话，那么为什么我们要使用所有的插件，比如redux，redux坚持存储数据，而不是直接使用localStorage。如果我错了，请纠正我！谢谢你的帮助。我查了一下你的简历