将用户数据保存在redux中，但不保存在localStroage中

Question

我有用户数据，包括电子邮件，用户名，密码，ShippingAddress等。我在localStorage中存储jwt令牌，令牌包括:username,id,createdAt..

我想把用户数据持久化到我的redux-store，但是我不知道怎么做。

我不希望用户信息在本地存储，但另一方面，每次我刷新页面我的用户数据从redux被删除，我有点卡住。试着做一个简单的检查，如果localstorage(jwt) id等于刚刚登录的用户-将数据存储在存储中，它工作，但正如我所说的一次刷新删除所有..

想从专业人士那里得到一些提示!:)

使用:graphqlapollo, redux toolkit, react.

我最好的想法是从服务器请求我需要用户名电子邮件密码的每个组件。等等，但我认为它太大了。

Answer 1

React只是JavaScript，因此，存储在React中的任何数据都不会持久存在，并且会在页面刷新时丢失。任何你想在页面刷新后保存的信息都需要存储在其他地方(即本地存储)。

有一些方法可以从本地存储中检索信息，并在每次页面重新加载后将它们(非永久地)存储在Redux中。这个解决方案看起来会有所不同，这取决于你如何使用React。

如果你正在使用功能组件和钩子，useEffect钩子可以用来在每次页面重新加载后从localStorage检索数据。点击这里阅读useEffect的文档。它可能看起来像这样:

useEffect(() => {
const storedData = JSON.parse(localStorage.getItem("storedData"));
// save to component's state or redux here.
}, []);

如果useEffect被放置在你的app组件的某个地方，它将在每次重新渲染时运行，从而使看起来像数据在React中持久化，因为它将始终存在。

Answer 2

通常情况下，你应该有这样的流程:

• 用户登录，例如/api/v1/login，
• 服务器返回一个临时令牌(如果你正在使用otp代码或2fa)，或用户jwt，将用于授权后续请求。
• 令牌保存在本地存储。
• 当用户刷新页面时，您检查local storage并在请求服务器上使用令牌(这样您可以检查它仍然有效，通常您可以执行类似/api/v1/user的操作来获取用户数据)。
如果令牌是有效的，那么您可以将API调用返回的用户信息存储到redux存储中。如果没有，你可以重定向用户到登录页面再次