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

Question

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

Answer 1

redux-persist

Answer 2

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

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

1. 首先，安装 redux-persist：

npm install redux-persist

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

// reducers.jsimport { 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);

3. 在应用中使用持久化的 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 storeconst 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 的使用可能需要根据你的具体需求进行一些配置和调整。