redux-persist is not working

[vicky-blr]

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?

[Dmitrylolo]

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

[vicky-blr]

Thanks @Dmitrylolo , I will try this later. In the meantime, I went ahead with another library redux-storage which is working perfectly for me. Closing it for now

[Dmitrylolo]

sometimes it calls error with key in persistConfig. try key: 'primary'

[basudz365]

@Dmitrylolo I had the same issue as the OP and after changing the key from 'root' to 'primary', it seems to be working properly now. Not sure why this is or if it's only an issue when inside the Expo environment but either way, thanks for the suggestion!

[rodrigo-fonseca]

I'm having the same issue, here is my code:

import { createStore, applyMiddleware } from 'redux'
import promiseMiddleware from 'redux-promise-middleware'
import reducer from 'redux/reducers'
import createReduxListen from 'redux-listen'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

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

const persistedReducer = persistReducer(persistConfig, reducer)
const listenStore = createReduxListen()
const middleware = applyMiddleware(promiseMiddleware(), listenStore.middleware)
const store = createStore(
  persistedReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  middleware,
)
const persistor = persistStore(store)

export { store, listenStore, persistor }

[rodrigo-fonseca]

it simply doesn't work like it should

[gabrielhpugliese]

Hey guys, did you manage to find out what was wrong? I am struggling right now too...

[hackrit]

Hi guys,
I found a solution to this problem. (might not apply to all the cases, but worked for me).
The problem was caused by my default return in my reducer, which I returned {...state}.
Once I changed the default return to just return state, everything work as expected.

[theonlyjohnny]

Was banging my head against this for longer than I want to say... thanks @hackrit ! that fixed it for me

[programmer-RN]

Hi, I am new in redux persist, I am facing the error of redux-persist failed to create sync storage, falling back to memory storage, may I know which part am I missing?

[MartinJHItInstituttet]

@hackrit I hardly can't believe this was the solution... I could see my outbound state being correct, but somehow it wasn't being reflected in my state. And sure enough, I returned a clone of my state in the default, instead of the original state.

Thanks so much for the help!

[andrewmartin]

Really wish the docs were a bit more clear in naming primary as the required value for the config key key instead of root...very confusing. works well now though. 👍

[jerryzlau]

How would I be able to deal with nested reducers then?

I have a nested reducer:
default:
return {
...state,
business: businessReducer(state.business, action)
}

[klis87]

@jerryzlau you can wrap any nested reducer in persistReducer independently, because persistReducer is higher order reducer:

return {
  ...state,
  business: persistReducer(
    { storage, key: 'business' },
    businessReducer(state.business, action),
  ),
}

[klis87]

@jerryzlau actually above snippet probably won't work, it would be better to use it together with nested combineReducers, or to assign wrapped reducer to const otherwise it would be recreated on every state update, like:

const persistedBusinessReducer = persistReducer(
    { storage, key: 'business' },
    businessReducer,
);

...
return {
  ...state,
  business: persistedBusinessReducer(state.business, action),
}

[dvaldivia]

How can you even debug this problem?

[ckOfor]

use version "redux-persist": "^5.10.0"

[bharatgupta99]

a solution to this problem. (might not apply to all the cases, but worked for me).
The problem was caused by my default retur

worked for me. but why does this happen?

[KBiswas98]

Hi guys,
I found a solution to this problem. (might not apply to all the cases, but worked for me).
The problem was caused by my default return in my reducer, which I returned {...state}.
Once I changed the default return to just return state, everything work as expected.

Man u just save my day....

[AbrahamMayowa]

@hackrit thanks.

[jobinvarghese18]

Hi guys,
I found a solution to this problem. (might not apply to all the cases, but worked for me).
The problem was caused by my default return in my reducer, which I returned {...state}.
Once I changed the default return to just return state, everything work as expected.

Thanks, bro it's working,I took almost two days... Thanks, bro you saved my day

[jobinvarghese18]

@hackrit thanks man