reduxjs/toolkit 刷新页面后如不丢失 store 中的数据？

Question

reduxjs/toolkit 刷新页面后如不丢失 store 中的数据？

发布于
2024-01-23 河南

reduxjs/toolkit刷新页面后，store 中的数据丢失怎么办？
我想放到 localstorage 中，获取的时候，判断对象是否存在，不存在就把值给 state，结果 state 不让复制，但是直接返回缓存，就失去了响应式，这该咋解决？
网上有说 redux-persist，但是这个比较老，都是 redux 的例子，大家都是怎么解决的？

react redux localstorage 前端 javascript

阅读 1k

AI BotBETA

当使用 Redux Toolkit 创建 Redux store 时，如果你想在刷新页面后保留 store 中的数据，你可以考虑使用持久化存储库，例如 redux-persist。redux-persist 是一个流行的 Redux 持久化库，它可以帮助你轻松地将 Redux store 中的数据保存到浏览器的 localStorage 或 sessionStorage 中，并在页面刷新或重新加载时恢复数据。

下面是一个使用 redux-persist 实现 Redux store 数据持久化的基本示例：

首先，安装 redux-persist：

npm install redux-persist

在 Redux store 的创建中集成 redux-persist：

// reducers.js
import { createSlice } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // localStorage 默认存储引擎

const initialState = {
  // 初始状态
};

const mySlice = createSlice({
  name: 'mySlice',
  initialState,
  reducers: {
    // 定义你的 reducer 逻辑
  },
});

export const { ...actions } = mySlice.actions;

// 持久化配置，保存到 localStorage 中，并使用默认过滤器保留需要的状态部分
export default persistReducer({
  key: 'myRoot', // 用于恢复的 key
  storage,
  whitelist: ['mySlice'], // 需要持久化的 reducer 名称或状态路径列表
})(mySlice.reducer);

在应用中使用持久化的 Redux store：

// index.js 或 App.js（应用入口文件）
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // localStorage 默认存储引擎
import rootReducer from './reducers'; // 根 reducer，通常是一个 combineReducers 的结果
import App from './App'; // 你的应用组件

const persistedReducer = persistReducer({ key: 'myRoot', storage });
const store = createStore(persistedReducer, rootReducer); // 创建持久化的 Redux store
const persistor = persistStore(store); // 创建持久化实例，用于存储和恢复数据

render(
  <Provider store={store}>
    <App /> // 将 store 传递给应用组件
  </Provider>,
  document.getElementById('root') // 将根元素 ID 作为参数传递给 render 方法，以便在页面上渲染组件。你可以根据实际情况修改根元素的 ID。
);

通过上述配置，当页面刷新时，redux-persist 会从 localStorage 中恢复持久化的 Redux store 数据，并自动将其合并到新的 store 中。这样就可以在刷新页面后保留 store 中的数据了。请注意，redux-persist 的使用可能需要根据你的具体需求进行一些配置和调整。

1 个回答

得票最新

Yummy

12419

发布于
2024-01-23 上海

redux-persist

撰写回答