Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Persist not working after page reload or refresh #1450

Open
kcibdev opened this issue Aug 27, 2023 · 4 comments
Open

Persist not working after page reload or refresh #1450

kcibdev opened this issue Aug 27, 2023 · 4 comments

Comments

@kcibdev
Copy link

kcibdev commented Aug 27, 2023

I was using react-toolkit but then decided to use redux-persist in order to persist my user reducer (ie my user data, like the access token and info), but when i added the redux persist and followed an online guide. t wasn't working as intended. even after reloading the page, the data still gets wiped out, Please how do i fix this issue?

I am using

"@reduxjs/toolkit": "^1.9.5",
"react-redux": "^8.1.1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.2",

Am using next js, react js and typescript

My store.js

import { combineReducers, configureStore, Store } from "@reduxjs/toolkit";
import thunk from "redux-thunk";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
import {
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

import authReducer from "./slices/authSlice";
import teamReducer from "./slices/teamSlice";
import testimonialReducer from "./slices/testimonialSlice";
import currencyReducer from "./slices/currencySlice";
import subscriptionReducer from "./slices/subscriptionSlice";
import exchangeReducer from "./slices/exchangeSlice";
import referralReducer from "./slices/referralSlice";
import notificationReducer from "./slices/notificationSlice";
import tradeReducer from "./slices/tradeSlice";
import userReducer from "./slices/userSlice";

import storage from "redux-persist/lib/storage"; // defaults to localStorage for web
import { persistReducer } from "redux-persist";

const combineReducer = combineReducers({
  auth: authReducer,
  team: teamReducer,
  testimonial: testimonialReducer,
  currency: currencyReducer,
  subscription: subscriptionReducer,
  exchange: exchangeReducer,
  user: userReducer,
  referral: referralReducer,
  notification: notificationReducer,
  trade: tradeReducer,
});

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["user"],
};

const persistedUserReducer = persistReducer(persistConfig, combineReducer);

const makeStore = () =>
  configureStore({
    reducer: persistedUserReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [
            FLUSH,
            REHYDRATE,
            PAUSE,
            PERSIST,
            PURGE,
            REGISTER,
            HYDRATE,
          ],
        },
      }).concat(thunk),
  });

const store = makeStore();

export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const wrapper = createWrapper<Store>(makeStore, { debug: true });

my root app component _app.js

import type { AppProps } from "next/app";
import { Provider } from "react-redux";
import { persistor, wrapper } from "../redux/store";
import { AuthProvider } from "../context/AuthProvider";
import { PersistGate } from "redux-persist/integration/react";

export default function App({ Component, pageProps }: AppProps) {
  const { store, props } = wrapper.useWrappedStore(pageProps)
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <AuthProvider>
          <Layout isAuthenticated={false}>
            <Component {...props.pageProps} />
           </Layout>
        </AuthProvider>
      </PersistGate>
    </Provider>
  );
}

my userSlice.js

import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
import { User } from "../../types/user";

// Interface representing the state structure of the User slice
interface UserState {
  user: User; // Data representing the user's profile
  balance: string; // User's balance as a string (could be a number, but maintained as a string for precision)
  token: string; // user access token
  isLoading?: boolean; // A flag to indicate if user-related actions are in progress
}

// Initial state for the User slice
const initialState: UserState = {
  user: {}, // Initially, there is no user data, so an empty object is used
  balance: "", // Initial balance is set to ""
  token: "", // Initial token is set to ""
  isLoading: false, // Initially, there are no loading actions, so isLoading is set to false
};

// Create the User slice using createSlice from Redux Toolkit
export const userSlice = createSlice({
  name: "user", // Name of the slice, used as the prefix for action types
  initialState, // Initial state for the slice
  reducers: {
    setUser: (state, action: PayloadAction<User>) => {
      // Reducer to update the user data when the "setUser" action is dispatched
      state.user = action.payload;
    },
    setBalance: (state, action) => {
      // Reducer to update the user's balance when the "setBalance" action is dispatched
      state.balance = action.payload;
    },
  },
  extraReducers(builder) {},
});

// Export actions from the User slice
export const { setUser, setBalance } = userSlice.actions;

// Export the reducer function for the User slice to use in the Redux store
export default userSlice.reducer;

And then this is how i set my user


const dispatch = useDispatch<AppDispatch>()

 dispatch(setUser({
          ...userData,
          access_token: data.access_token
        }))

Please can someone tell me what's wrong or what am doing wrong
Thanks

@rmed1na
Copy link

rmed1na commented Jan 12, 2024

I'm facing the same issue at the moment. Pretty much same stack and versions

@samvoults
Copy link

I copied/pasted my redux implementation from a RN 0.72 project to a new RN 0.73 project and it's not working for me neither although it's working correctly on my RN 0.72 project.

@sumanth000
Copy link

im using a redux toolkit config store too.. not working for me too.. is there a bug in this new config store?

@acelyavul
Copy link

it worked after i removed whitelist, i did combined all reducers with persist ones

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants