页面刷新时Redux state变为null，如何避免该问题？

Redux的状态默认存储在浏览器运行内存中，页面刷新时内存数据会被清空，因此刷新后Redux内的所有状态都会回到初始值。

方案1：使用redux-persist库实现自动持久化（推荐） #

这是最常用的Redux持久化方案，不需要手动写存取逻辑，配置后可以自动同步指定的Redux状态到本地存储。
操作步骤：

• 安装依赖

npm install redux-persist
# 或者使用yarn
yarn add redux-persist

• 配置Redux store：
  1. 在store配置文件中引入持久化相关方法和存储引擎，用persistReducer包裹根reducer，指定需要持久化的reducer字段
  2. 创建store后调用persistStore生成持久化实例
  3. 在项目入口文件用PersistGate组件包裹根组件，等待持久化状态读取完成后再渲染页面
• 可以通过配置白名单/黑名单，仅持久化登录状态、用户信息这类需要保留的字段，避免冗余数据占用本地存储。

方案2：手动实现状态持久化（无额外依赖） #

如果不想引入第三方库，可以自己实现状态的存取逻辑：

• 登录成功触发Redux状态更新的同时，将需要持久化的字段存入localStorage（永久存储，关闭浏览器也保留）或者sessionStorage（临时存储，关闭标签页就清空），示例代码：

// 登录成功后存值
localStorage.setItem('isLoggedIn', 'true')
localStorage.setItem('userInfo', JSON.stringify(userInfo))

• 在对应reducer的初始状态中优先读取本地存储的值，没有对应值时再使用默认初始值：

const initialState = {
  isLoggedIn: localStorage.getItem('isLoggedIn') === 'true',
  userInfo: JSON.parse(localStorage.getItem('userInfo') || 'null')
}

• 用户退出登录时，同步清除本地存储的对应字段：

localStorage.removeItem('isLoggedIn')
localStorage.removeItem('userInfo')

localStorage和sessionStorage都属于前端明文存储，可被直接读取，不要存放密码、接口密钥等敏感信息。如果项目安全要求较高，可以选择每次页面刷新时，携带cookie中的身份凭证调用后端用户校验接口，校验通过后再更新Redux状态，这种方式不需要前端存储敏感数据，安全性更高。

内容的提问来源于stack exchange，提问作者Kartik sharma