使用 Redux 代替 cookie 和本地存储答案

【问题标题】：Using Redux instead of cookie and local storage使用 Redux 代替 cookie 和本地存储
【发布时间】：2019-01-19 12:45:46
【问题描述】：

重新加载浏览器后是否会清理 Redux 存储？我可以使用 redux 代替 cookie 来保存用户信息和令牌吗？

【问题讨论】：

标签： reactjs cookies redux local-storage

【解决方案1】：

使用 Redux Persist 或构建一个中间件，该中间件将在每次调度操作时保存存储，然后创建一个 HOC，当应用重新加载（即页面刷新）时，它将检查项目的本地存储并然后在加载应用程序之前将其恢复到商店，然后渲染应用程序。

根据复杂性，如果你想将某些 reducer 列入黑名单，我会使用 Redux-Persist。如果您想自己构建简单的东西，请使用中间件选项。

【讨论】：

谢谢，我只是想保存令牌用于请求和身份验证，我认为最好在浏览器上使用cookie和本地存储，你觉得呢？
@SajadBeheshti 创建一个 redux 中间件，在发出请求之前检查本地存储/cookie 是否存在，然后将其恢复到存储或将其用于请求。

【解决方案2】：

Redux 是一个状态管理库，因此，在刷新时，redux 存储仅包含 reducer 的 initialstate。如果您想保存令牌或经过身份验证的用户信息，请将其保存在 localStorage 中。同时确保您取消退出应用后设置本地存储。

【讨论】：

【解决方案3】：

Redux 商店在应用重新加载时获取初始状态。尝试这个：为本地存储制作一个转储组件并在任何你想要的地方使用它。

Constants.js

export const USER_MODEL = {
set: ({ token, userInfo }) => {
localStorage.setItem('token', token);
localStorage.setItem('userInfo', userInfo);
},
remove: () => {
localStorage.removeItem('token');
localStorage.removeItem('userInfo');
},
get: () => ({
token: localStorage.getItem('token'),
userInfo: localStorage.getItem('userInfo’),
})
};

User.js

import { USER_MODEL } from './Constants';
// just an example how you can set                    localStorage anywhere in your component 

USER_MODEL.set({
    token: “abc”,
    userInfo: {name: ‘foo’, city: ‘bar’},
  });

// get user model from localStorage
const token = localStorage.get().token;
const userInfo =   localStorage.get().userInfo;

【讨论】：