使用Redux代替Cookie和本地存储

时间:2018-08-12 17:37:01

标签: reactjs cookies redux local-storage

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

3 个答案:

答案 0 :(得分:0)

使用Redux Persist或构建一个中间件,该中间件将在每次分派动作时保存商店,然后创建一个HOC,以便在重新加载应用程序(也就是刷新页面)时,它将检查项目的本地存储并然后在加载应用程序之前将其还原到商店中,然后呈现该应用程序。

根据复杂程度,如果您想将某些减速器列入黑名单,我将使用Redux-Persist。如果您想简单地自己构建,请使用中间件选项。

答案 1 :(得分:0)

Redux是一个状态管理库,因此,刷新时,redux存储仅包含化简器的initialstate。如果要保存令牌或经过身份验证的用户信息,则将其保存在localStorage中。还要确保,您退出应用程序后取消设置本地存储空间。

答案 2 :(得分:0)

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;