Redux Persist using Redux Toolkit in React - react-redux

Question

I wanna store states after refreshing the page, so I used Redux Persist and followed the instructions at LogRocket, I failed again and again because my configureStore is different. Can you please tell me how to do it?
Here is my store.js
// store.js
import { configureStore } from "#reduxjs/toolkit";
import appSlice from './appSlice';
const store = configureStore({
reducer: {
app: appSlice.reducer,
}
});
export default store
Here is my index.js
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { App } from './App';
import store from './data/store';
import './index.css'
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// const store = configureStore({ reducer: App });
// const store = createStore(Reducer)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<Router>
<Routes>
<Route path="/*" element={<App/>} />
</Routes>
</Router>
</Provider>
</React.StrictMode>
);
reportWebVitals();
Thank you in advance!
When I follow the instructions, console shows couldn't find app store

Answer 1

// create store.js like this
import { combineReducers } from 'redux';
import { configureStore } from '#reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
// add the reducers that need to be persisted
const reducersToPersist = [];
const persistConfig = {
key: 'root',
storage,
whitelist: reducersToPersist
};
const reducers = combineReducers({
// Your reducers
});
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
reducer: persistedReducer,
});
const persistor = persistStore(store);
export { store, persistor };
in your root file
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import { persistor, store } from './store';
const App = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
{/* Your Project routes */}
</PersistGate>
</Provider>
);
};
export default App;