redux-persist: rehydrate for "root" called after timeout., Object {
  "INITIALIZING": true,
  "_persist": Object {
    "rehydrated": true,
    "version": -1,
  },
  "user": null,
}, undefined
- node_modules/redux-persist/lib/persistReducer.js:92:59 in _rehydrate
- ... 13 more stack frames from framework internals

I am using expo sdk version 25 My code is as below

reducers.js

export default (
  state = {
    INITIALIZING: true,
    user: null
  },
  action
) => {
  switch (action.type) {
    default:
      return state;
  }
};

configureStore.js

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
  let store = createStore(persistedReducer);
  let persistor = persistStore(store);
  return { store, persistor };
};

App.js

import React from 'react';
import { StyleSheet, Text, ActivityIndicator, View } from 'react-native';
import * as firebase from 'firebase';
import { PersistGate } from 'redux-persist/integration/react';
import { firebaseConfig } from './src/config';
import { Provider } from 'react-redux';
import configureStore from './src/configureStore';
import styled from 'styled-components';
// import Main from './src/screens/Main';
const { store, persistor } = configureStore();
firebase.initializeApp(firebaseConfig);

const StyledLoaderContainer = styled.View`
  justify-content: center;
  align-items: center;
  margin-top: 100px;
`;

const Loading = () => (
  <StyledLoaderContainer>
    <ActivityIndicator />
    <Text>Initializing...</Text>
  </StyledLoaderContainer>
);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={<Loading />} persistor={persistor}>
          <View>
            <Text>This is root</Text>
          </View>
        </PersistGate>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

I followed doc here for setup --> https://github.com/rt2zz/redux-persist

Basically I've simple basic setup as per the document

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import user from './reducers/user';

const persistConfig = {
  key: 'root',
  storage,
}

const rootReducer = combineReducers({user: user});

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer, applyMiddleware(thunk));

const persistor = persistStore(store);

export { store, persistor } ;

And then, I add PersistGate in my render.

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor} >
      <RootRouter />
    </PersistGate>
  </Provider> ,
  document.getElementById('root')
);

But still when I refresh my page, it doesn't keep those states active. The only difference I can see in my code (than document) is that I'm using thunk. Can someone please help me?

I'm completely new to redux. I want to persist the state can anyone please give some good example how to persist the state and also per reducer. I saw some examples in closed issues but it was not clear for me. Thank you.

If not, does anyone have any alternatives they would suggest?

perhaps the maintainer could also do one final commit to update the readme letting people know it's no longer being actively developed.

Hi folks 👋,

I just installed the redux-persist in a project still in its early stages and I'm facing this error message in the console as first thing when the page loads. I haven't done much besides including the lib as is, and my reducers are pretty simple for now, so I believe it has something to do with redux-persist itself?

Error:

index.js:1446 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) {
    _pStore.dispatch({
      type: _constants__WEBPACK_IMPORTED_MODULE_2__["REGISTER"],
      key: key
    });
  }

Code above is followed by this message:

• Take a look at the logic that dispatched this action: {type: "persist/PERSIST", register: ƒ, rehydrate: ƒ}...
• (See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)

SS of the whole thing:

Could anyone help me pointing me in the right direction? It does not break the application, but the error message is there in the console.

Cheers,

In the recipe for delay render, it's pretty straightforward if persistStore is called in the same file that you're rendering in. However, my rendering happens in a different component. Is there a straight forward way to notify a separate component that rehydration has completed?

I still looking into it, but it would be great to achieve. Now the reducers are initiated twice: the first one with the initial value, and the second - with the rehydrated one. I tried to find some solutions, but all of them seems to be antipattern, except of this. Actually, this is the purpose of the store's initialState to pass the rehydrating state from server or localStorage. What do you think if we get the data from the localStorage before creating the store?

Versions: TS: 2.7.1 redux-persist: 5.6.5

All of the sub directory imports are not possible when using typescript with redux-persist. Example:

import storage from 'redux-persist/lib/storage'
// error:
[ts]
Could not find a declaration file for module 'redux-persist/lib/storage'. '.../node_modules/redux-persist/lib/storage/index.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist';`

This addresses issue (#64), when you have an immutable object as the root state.

The redux-persist-immutable-state package provides the functions for actually iterating over an immutable root state as well as getting and setting keys.

Usage of redux-persist-immutable-state:

import { stateIterator, stateGetter, stateSetter, 
         stateReconciler, lastStateInit } from 'redux-persist-immutable-state';

persistStore(state, {
  transforms: [reduxPersistImmutable], 
  stateIterator: stateIterator,  
  stateGetter: stateGetter, stateSetter: stateSetter,
  lastStateInit: lastStateInit
})

I've spent some time benchmarking the persisting of new data on state changes, as well as rehydrating the state from localStorage. Here are the results:

The skeleton around those benchmarks is here: https://github.com/rufman/benchmark-redux-persist If you want to run the tests yourself just clone https://github.com/rufman/redux-persist into the lib directory of benchmark-redux-persist and run webpack. Then open index.html and run the tests.

Hi rt2zz~ I want to click one button to clear the storage cache in ReactNative, I used PersistGate but I don't know how to invoke the purge method in the RN component. Could you please explain how to invoke purge method when the onPress event occurs？Thx a lot!! The code is as following: import * as React from 'react'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/es/integration/react';

import IntlComponent from './IntlComponent'; import configureStore from './middlewares';

import {View,Text} from 'react-native';

const { persistor, store } = configureStore(); const onBeforeLift = () => { // take some action before the gate lifts }

export default class App extends React.Component { render() { return <Provider store={store}> <PersistGate onBeforeLift={onBeforeLift} persistor={persistor} loading={}> } }

Hey guys, I'm trying to persist a Javascript Date object in the redux store, but it seems to be serializing into a string automatically, without being deserialized upon rehydration. Right now I can handle it with a transform (although it's a little messy), I feel like this should be default behavior, what do you guys think?

At the very least we could put a warning when persisting and then rehydrating gives you back a different object.

I am changing some things in the reducer yet the changes are not visible. The previous reducer persists. Eventhough I reset my application my changes to the reducer never apply.

This is mi store.js, where I set the redux persist configuration:

import { configureStore } from '@reduxjs/toolkit';
import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist';
import { combineReducers } from 'redux';
import AsyncStorage from '@react-native-async-storage/async-storage';

//Reducers
import loaderReducer from './loader';
import userReducer from './user';
import dataSlice from './data';

const rootReducer = combineReducers({loader: loaderReducer, userInfo: userReducer, data: dataSlice});

//Persist Config

const persistConfig = {
  key: 'root',
  version: 11, //Increment this value to reset the storage
  storage: AsyncStorage,
  blacklist: ['sedes'], //No se persisten estos reducers
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({  
  reducer: persistedReducer, 
  middleware: getDefaultMiddleware => getDefaultMiddleware({
    inmutableCheck: {warnAfter: 123}, 
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], //No se chequean estos tipos de acciones
      warnAfter: 124,
    } 
  })});

export const persistor = persistStore(store);
export default store;

and this is an example of a store:

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

const initialState = {
    load: false
}

export const loaderSlice = createSlice({
    name: "loader",
    initialState,
    reducers: {
        setLoader: (state, action) => {
            state.load = action.payload;
        }
    }
})

export const {setLoader} = loaderSlice.actions

export default loaderSlice.reducer

I am changing the version in the persistConfig (as this was an error I had in a previous proyect) yet there is no change at all. I am thinking maybe I am missing some import or importing something wrongly. Asi this EXACT configuration works perfectly in another proyect (maybe because I had a lower version of redux-persist)

In current documentation about createTransform() it unclear inboundState and outboundState parameters are full redux states to be serialized/deserialized or a value of a field of the state:

import { createTransform } from 'redux-persist';

const SetTransform = createTransform(
  // transform state on its way to being serialized and persisted.
  (inboundState, key) => {
    // convert mySet to an Array.
    return { ...inboundState, mySet: [...inboundState.mySet] };
  },
  // transform state being rehydrated
  (outboundState, key) => {
    // convert mySet back to a Set.
    return { ...outboundState, mySet: new Set(outboundState.mySet) };
  },
  // define which reducers this transform gets called for.
  { whitelist: ['someReducer'] }
);

export default SetTransform;

As it turns out, each function has signature (fieldValue, key, state) => newValue. I think the documentation should describe all three parameters. I can submit PR later

It seems anyone on the internet can write to this repo's wiki.

@rt2zz should probably restrict to collaborators only. Or maybe not? :) Anyhow, just thought I'd confirm if this was intentional.

https://github.com/rt2zz/redux-persist/wiki

There's autoMergeLevel1 and autoMergeLevel2 apis, but It'd be great if there's Level3 and 4 etc. I'm already using autoMergeLevel2 but it wouldn't merge anything that's nested more than 3 levels. for instance, this is my store

user: {
  something: {
    anything: {
          ...,
          hello: []      <--- this will not be merged
      }
  }
}