как сохранить состояние redux с помощью библиотеки redux-persist в NextJS

#reactjs #redux #react-redux #next.js #redux-persist

Вопрос:

Я создаю следующее приложение с помощью redux, и я могу легко управлять состоянием с помощью redux, но я хочу сохранять состояние redux после каждого обновления страницы, я новичок в redux, и мне становится сложно сохранять состояние redux.

_app.js. корневая страница/компонент 👇

 import { Provider } from 'react-redux'
import { store } from '../app/store'
import '../styles/globals.css'

const MyApp = ({ Component, pageProps }) => {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default MyApp
 

store.js 👇

 import { configureStore } from "@reduxjs/toolkit";
import basketReducer from "../slices/basketSlice";
import userSlice from "../slices/userSlice";

export const store = configureStore({
  reducer: {
    users: userSlice,
  },
});
 

userSlice.js 👇

 import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  user: null,
};
 
export const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    addUser: (state, action) => {},
    removeUser: (state, action) => {},
  },
});

export const { addUser, removeUser } = userSlice.actions;

// Selectors - This is how we pull information from the Global store slice
export const selectUser = (state) => state.users.user;

export default userSlice.reducer;
 

это код, который я использую для редактирования, но будет большим прогрессом, если кто-нибудь сохранит мое состояние редактирования, внеся изменения в этот код

любая подсказка будет полезна, если изменения в этом коде невозможны