Redux Persist TypeError:store.dispatch 不是函数

Posted

技术标签:

【中文标题】Redux Persist TypeError:store.dispatch 不是函数【英文标题】:Redux Persist TypeError: store.dispatch is not a function 【发布时间】:2022-01-06 20:29:41 【问题描述】:

在学习教程时,我得到了这个 store.dispatch 不是函数错误。我已经搜索了一段时间的 ***,但似乎找不到任何错误。我错过了什么?

显示错误的图像 [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')
);

【问题讨论】:

【参考方案1】:

您似乎已将 store 声明为返回已配置存储的函数。

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

【讨论】:

非常感谢 BUD.. 它对我有用,解释也很好。

以上是关于Redux Persist TypeError:store.dispatch 不是函数的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 redux-persist 阻止 redux-form “form”状态自动再水化

Redux-Persist安全加密

使用 connect 与 react-redux 和 redux-persist

为啥 Redux-Persist 不持久化存储

如何防止 redux-persist 在用户允许之前使用 LocalStorage?

Redux-persist 没有更新状态