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

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>
)