当我在不同的路线上时，Redux-persist 不会保留存储

Question

我正在尝试用reduxjs/toolkit实现redux-persistent。我使商店能够在主页上持续存在。然而，当我在应用程序中路由到MemeForm.jsx的不同路径时，我会调用另一个api从服务器获取数据(这会更改redux存储，因为这个api调用向存储添加了另一个切片(，并刷新页面，它会崩溃(编辑：刷新页面时，我在netlify上收到GET https://memegeneratorv2.netlify.app/217743513/fetch 404错误。(不过，它在我的本地计算机上运行得很好。我想我无法正确地使用reduxjs/toolkit实现redux-persistent。我一个星期都解不出这个问题。只要一点点帮助就完美了。

这是我的github回购https://github.com/ahmettulutas/MemeGeneratorV2这是netlify版本的应用程序。https://memegeneratorv2.netlify.app

store.js

import { configureStore } from '@reduxjs/toolkit'
import loadMemesSlice from "./features/loadMemes/loadMemesSlice";
import fetchedMemeSlice from "./features/editMeme/memeFormSlice";
import { combineReducers } from '@reduxjs/toolkit';
import {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = { // configuration object for redux-persist
key: 'root',
storage, // define which storage to use
whitelist : ['fetchedMemeSlice','loadMemesSlice'],
}  
const rootReducer = combineReducers({
loadMemesSlice: loadMemesSlice,
fetchedMemeSlice: fetchedMemeSlice,
})
const persistedReducer = persistReducer(persistConfig, rootReducer) 
const store = configureStore({
reducer: persistedReducer, 
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, PAUSE, PURGE, REHYDRATE, REGISTER, PERSIST],
},
}), 
})
export const  persistor = persistStore(store);
export default store;

app.js

import "./styles.css";
import Header from "./components/header";
import MemeComponent from "./features/editMeme/memeComponent";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AllMemes from "./features/loadMemes/displayMemes";
import FetchedMeme from "./components/fetchedMeme";
import Footer from "./components/footer";
export default function App() {
return (
<Router>
<Header />  
<div className="routes-section">
<Routes >
<Route  path="/" exact element={<AllMemes/>}/>
<Route path="/:id" element={<MemeComponent />}></Route>
<Route path="/:id/:fetchedmeme" element={<FetchedMeme />}></Route>
</Routes>
</div>  
<Footer />
</Router>
);
}

index.js

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

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

Answer 1

1. 是否在index.js中将应用程序组件封装到PersistGate组件

<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>

2. 请检查您是否在白名单中正确添加了减速器

whitelist : ['fetchedMemeSlice','loadMemesSlice']

Answer 2

我刚刚找到了答案。由于netlify有自己的规则，当您使用react路由器dom时，您需要处理一些其他配置。检查此链接并进行所需设置。https://github.com/vuejs/vuepress/issues/457#issuecomment-390206649之后；将netlify.toml文件添加到项目的根目录中，该文件在刷新页面时设置重定向根。你可以直接从我的github存储库复制和粘贴我的https://github.com/ahmettulutas/MemeGeneratorV2最后，如果您正在使用github回购中的CI选项，请推送您的更改。沃伊拉。