如何通过应用程序访问 localStorage 中的值。 ReactJS-Redux答案

【问题标题】：How to access values from localStorage through out the application. ReactJS-Redux如何通过应用程序访问 localStorage 中的值。 ReactJS-Redux
【发布时间】：2017-07-13 12:44:22
【问题描述】：

我一直在努力解决这个简单但棘手的问题。

我正在使用与 redux 反应。用户登录到我的应用程序后，我将拥有带有 name profile_pic 等字段的 user 对象，我将其设置为 redux 存储并在我想要的任何地方使用这些值。它工作得很好。但是一旦页面refresh/reload 所有redux 状态将回滚到初始状态。

为了解决这个问题，在localStorage 中设置user 对象和authenticated 标志。我需要在home page 组件和所有内部组件中使用它。

但是，在所有组件lifecycle 事件中从localStorage 获取将导致代码重复。

我知道，我可以通过使用 redux-persist 等库来解决这个问题。但我不想使用任何库来解决这个简单的问题。请给我一个更好的方法来做到这一点。谢谢。

顺便说一句 - 我尝试了以下链接，但对我的情况不起作用/不相关。
1.https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage
2.On React Router, how to stay logged in state even refresh the page?

【问题讨论】：

标签： reactjs redux local-storage react-router-v4

【解决方案1】：

每个 React 应用程序都有一个入口点；通常是一个 script.js。当您刷新页面时，无论您当前在哪个组件上，此代码都会始终运行。在这个脚本中，由于配置，您可能还可以访问您的 Redux Store。在我们的应用程序中，我们只是在本地存储中查找凭据，然后在存储中分发该有效负载。

const token = localStorage.getItem('token');
if (token) {
  const decoded = jwtDecode(token);
  store.dispatch({type: AUTH_USER, payload: decoded.scopes});
}

你的有效载荷可以是你需要的任何东西；这正是我们所做的。

【讨论】：

【解决方案2】：

你想做的是改变一些关于你启动你的 redux 存储的方式。

您需要创建一个 rehydrate 函数，该函数接受 localStorage 并将其映射到您的减速器可以与之交互的形状。（即，它必须看起来像你的状态树。）
然后，您需要该函数的反转版本，将您的状态序列化为 localStorage 友好形状（基本上是字符串）。理想情况下，这个函数会稍微去抖动，因为你要订阅它来改变状态，所以它会被调用很多次。
最后，您想调用 rehydrate 函数作为 createStore 的第二个参数，然后在生成的存储对象上，将您的去抖动序列化程序函数绑定到 store.subscribe。

在此处查看 API 文档以获取更多信息：

这是一种幼稚的实现，但它会让你走得更远，也许会向你展示你看过的其他一些工具会做什么。

如果你想创建一个更高级的存储系统，我认为下一个最好的地方是 Redux 中间件文档。

【讨论】：