Redux Provider 即使完全遵循文档也会卡住

Question

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')

我曾多次尝试按照格式将 redux store 添加到应用程序中，并参考了其他项目。即使我确实遵循了 redux store 的正确格式，我也不知道为什么会意外发生错误。

我彻底遵循了文档，但意外发生了错误。

Answer 1

Redux-Persist

PersistGate

应该是提供

Provider

实例的 Redux

store

组件的后代。交换

PersistGate

和

Provider

组件的顺序。

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>,
)

您也不想不加区别地禁用可序列化中间件。有关详细信息，请参阅与 Redux-Persist 一起使用。您只想忽略不可序列化的 Redux-Persist 操作（以及任何其他不可序列化的操作，如果存在的话）。

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);