Redux/store.js

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice' 
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const rootReducer = combineReducers({
  user: userReducer, 
});

const persistConfig = {
  key: 'root',
  storage,
  version: 1,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }),
});

export const persistor = persistStore(store);

Main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { store, persistor } from './Redux/store.js'
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react'

ReactDOM.createRoot(document.getElementById('root')).render(
  <PersistGate persistor={persistor}>
    <Provider store={store}>
      <App />
    </Provider>
  </PersistGate>,
)
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Uncaught TypeError: Cannot read properties of null (reading 'useMemo')

我曾多次try 将Reduxstore 添加到应用程序中,完全遵循格式,并参考了其他项目.我不知道为什么错误出乎意料地发生,即使我真的遵循了Redux存储的正确格式.

我完全遵循了文档,错误意外发生.

推荐答案

Redux-Persistent PersistGate应该是提供store实例的Redux Provider组件的后代.交换PersistGateProvider组件的顺序.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import App from './App.jsx';
import './index.css';
import { store, persistor } from './redux/store.js';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
)

您也不希望101禁用可串行化中间件.有关详细信息,请参阅Using with Redux-Persist.您只需要忽略不可序列化的Redux-Persistent操作(and any other non-serializable actions if they exists).

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage';
import userReducer from './slices/userSlice';

const rootReducer = combineReducers({
  user: userReducer, 
});

const persistConfig = {
  key: 'root',
  storage,
  version: 1,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const ignoredActions = [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER];

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions
      }
    }),
});

export const persistor = persistStore(store);

Reactjs相关问答推荐

实时收听react前端应用程序中的webhook响应

无法使用#13;或br将新行设置为文本区域'"&"<>

在Redux工具包查询中,是否可以将标记应用到API切片内的所有端点?

在Reaction中单击并显示子组件延迟/动画

使用VITE的Reaction应用程序的配置是否正确?

在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

警告:遇到两个子元素拥有同一把 keys .键应该是唯一的,以便组件在更新时保持其身份

如何更新 FunctionComponentElement 的 props

如何根据ReactJS中元素列表中的布尔值仅显示一次值

如何将 npm 包添加到我的 Vite + React 应用程序中?

React router v5 仅在生产中不适用于嵌套路由

如何更新redux状态存在的输入框

当我在 React Router Dom 中使用两个参数并直接在页面上导航时,数据获取没有发生

如何在 Next Js 13 App Router 中添加 Favicon 图标?

MUI - ButtonGroup fullWidth 条件屏幕大小不起作用?

我应该使用 useEffect 来为 React Native Reanimated 的 prop 值变化设置动画吗?

如何从 React Redux store 中删除特定项目?

添加 React/Redux 组件模板的 VS Code 扩展

为什么我在此代码段中看不到 useEffect for count = 1?

当父组件重新渲染时做出react ,我失go 了子状态.我错过了什么?