Redux Persist TypeError: store.dispatch is not a function

Question

在学习教程时，我得到了 store.dispatch is not a function 错误。我已经在 Whosebug 上搜索了一段时间，但似乎找不到任何错误。我错过了什么？

显示错误的图片 [1]: https://i.stack.imgur.com/AekWH.png

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

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

const rootReducer = combineReducers({user: userReducer, cart: cartReducer})
const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = () => configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})


export const persistor = persistStore(store)

指数

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

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

Answer 1

您似乎已将 store 声明为 returns 配置商店的函数。

export const store = () => configureStore({ // <-- a function
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

并且您传递了对此 store 函数的引用 persistStore

export const persistor = persistStore(store) // <-- store not invoked

虽然您可以只在每个地方调用 store 函数，但这会很糟糕，因为您会在应用程序的不同部分有效地创建多个商店实例，从而赢得一起工作。您应该只导出并使用一个已配置的存储对象。

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

Redux Persist TypeError: store.dispatch is not a function

Redux Persist TypeError: store.dispatch is not a function

store

redux

react-redux

react-hooks

redux-toolkit