在学习教程时,我得到了这个store.dispatch不是函数错误。我搜索了stackoverflow一段时间,但似乎找不到任何错误。我错过了什么?
显示错误的图像[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')
);
您似乎已将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);