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”状态自动再水化
使用 connect 与 react-redux 和 redux-persist