Redux-persist doesn't persist the store when I'm on a different route

Question

I'm trying to implement redux-persist with reduxjs/toolkit. I made it possible to persist the store on main page. However, when I route to MemeForm.jsx different paths in my app where I make another api call to fetch data from the server (which changes the redux-store since this api call adds another slice to the store) and refresh the page it gets crashed. (Edit: I get GET https://memegeneratorv2.netlify.app/217743513/fetch 404 error on netlify when I refresh the page.) It works perfectly in my local computer, though. I guess I couldn't implement redux-persist with reduxjs/toolkit correctly. I can't figure out this problem for a week. A little bit of help would be perfect.

Here is my github repo https://github.com/ahmettulutas/MemeGeneratorV2 and here is the netlify version of the app. 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
)

I checked your project. It seems like the redux persist library is working correctly. prnt.sc/26o4k5q — WebEXP0528
– WebEXP0528, Commented Feb 3, 2022 at 20:48

WebEXP0528 · Accepted Answer · 2022-02-03 20:22:39Z

0

Did you wrap the App Component to PersistGate Component in index.js?

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

Please check if you added the reducer in the whitelist correctly.

whitelist : ['fetchedMemeSlice','loadMemesSlice']

answered Feb 3, 2022 at 20:22

WebEXP0528

6014 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmet Ulutaş Over a year ago

I edited my question and added index.js of my project. It looks just like your answer. By the way I also have whitelist : ['fetchedMemeSlice','loadMemesSlice'] part as well. The project works ok in my local computer. Can't figure out what the problem is. Thanks for your interest by the way.

Ahmet Ulutaş · Accepted Answer · 2022-02-03 23:27:16Z

I have just found the answer. Since netlify has it's own rules you need to handle some other configs when you use react-router-dom. Check this link and do the required settings. https://github.com/vuejs/vuepress/issues/457#issuecomment-390206649 After that; add a netlify.toml file, which sets the redirect root when you refresh the page, to your project's root directory. You can directly copy and paste mine from my github repository https://github.com/ahmettulutas/MemeGeneratorV2 Finally, push your changes if you are using CI option from your github repo. Voila.

Collectives™ on Stack Overflow

Redux-persist doesn't persist the store when I'm on a different route

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related