Why is my website not loading anymore after using redux-persist

Question

I am trying to learn how to implement redux-persist into my project inorder to persist states in case of user refreshing the page, etc... After modifying the required files, I have no errors yet my page is just white, nothing renders and I dont understand why..

Here is my code

import { ProcessReducer } from "./chat/chatReducer";
import { createStore, combineReducers } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import token from "./login/token";
import isLoggedIn from "./login/isLoggedIn";
import userId from "./login/userId";
import img from "./Donation/ImageReducer";
import title from "./Donation/TitleReducer";
import amount from "./Donation/AmountReducer";

const rootReducer = combineReducers({
  token_1: token,
  isLoggedIn: isLoggedIn,
  userId: userId,
  ProcessReducer: ProcessReducer,
  img: img,
  title: title,
  amount: amount,
});

const persistConfig = {
  key: "root",
  storage,
  whitelist: [
    "title",
    "img",
    "token_1",
    "isLoggedIn",
    "userId",
    "ProcessReducer",
    "amount",
  ],
};

export default persistReducer(persistConfig, rootReducer);
export const store = createStore(rootReducer);
export const persistor = persistStore(store);

and

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {store,persistor} from "./reducers/index"
import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";
import {PersistGate} from 'redux-persist/integration/react'


ReactDOM.render(
  <Provider store={store}>
    <Router>
   <React.StrictMode>
     <PersistGate persistor={persistor}>
     <App />
     </PersistGate>
   </React.StrictMode>
   </Router>
  </Provider>,
  document.getElementById('root')
);

I only modified these two files, can someone point me at what am I doing wrong ? thank you --- Bellow are my original files

import { ProcessReducer } from "./chat/chatReducer";
import { createStore, combineReducers } from "redux";
import token from "./login/token";
import isLoggedIn from "./login/isLoggedIn";
import userId from "./login/userId";
import img from "./Donation/ImageReducer";
import title from "./Donation/TitleReducer";
import amount from "./Donation/AmountReducer"

const reducers = combineReducers({
  token_1: token,
  isLoggedIn: isLoggedIn,
  userId: userId,
  ProcessReducer: ProcessReducer,
  img: img,
  title:title,
  amount:amount
});

export const store = createStore(reducers);

export default store;

and

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {store} from "./reducers/index"
import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";


ReactDOM.render(
  <Provider store={store}>
    <Router>
   <React.StrictMode>
     <App />
   </React.StrictMode>
   </Router>
  </Provider>,
  document.getElementById('root')
);

Answer 1

Your implementation seems to be wrong. Let's review them step by step:

First, create a persistedReducer:

const persistedReducer = persistReducer(persistConfig, rootReducer);

Now, create the store using the persistedReducer (you used the rootReducer to create your store which is not correct)

const store = createStore(persistedReducer);

You create the store, one step forward, you need also a persist store:

const persistor = persistStore(store);

We done here, wrap them all together, and export essentials:

import {createStore} from 'redux';
import {persistStore, persistReducer} from 'redux-persist':
// other codes ...

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

export {store, persistor}

Time to use the store and persistor in the App:

import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/lib/integration/react';
import {store, persistor} from 'path/to/the/store';

const App = () => (
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <MyApplication />
    </PersistGate>
  </Provider>
)