Need an Example

Dear maintainers, your library looks great but v5 just doesn’t work for me, I did read the readme and the only guide I’ve found. It just doesn’t write to my localStorage, here’s how I setup the store:

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

const persistConfig = {
	key: 'root',
	storage: storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);

const middlewares = [thunk];
let ehnancer = applyMiddleware(...middlewares);

const isDevMode = process.env.NODE_ENV === 'development';

if (isDevMode) {
	const { composeWithDevTools } = require('redux-devtools-extension'); // eslint-disable-line global-require
	ehnancer = composeWithDevTools(ehnancer);
}

const store = createStore(persistedReducer, undefined, ehnancer);
export default store;
export const persistor = persistStore(store);

Is it supposed to automatically persist when my store updates? I actually assumed that.

Please correct me if I’m missing something obvious, but I believe a working demo would solve anyone else’s problem of that kind. Does this make sense?

[rt2zz]

@grebenyuksv-preply sorry this has not been a straight forward integration for you! we are constantly working to improve the docs but it is a tough challenge.

I am glad you got it working. persistReducer should work as expected whether you apply it to the rootReducer or a nested reducer. There are a couple of things to look out for:

1. any state changes dispatched before REHYDRATE will most likely be overwritten by the REHYDRATE action. Usually people use PersistGate or redux-action-buffer or custom strategies to delay firing actions.
2. if you reducer updates state during REHYDRATE, then the state reconciler will skip rehydration for that reducer. This is done so that reducers can opt-in to custom rehydration handling as needed. Unfortunately it does cause confusion as in your case.
3. it is true that you can only persist reducers which have object like state. This may change in the future but it is the case for now.

If you have suggestions for how to further improve the docs please share. I think (2) is the biggest gotcha that we are looking for ways to better communicate.

[grebenyuksv-preply]

Thank you so much @Baransu , I did do this all before, but you inspired me for one more try. My setup didn’t seem to work for a combination of reasons:

• my reducer was returning a Number, not an Object;
• I still find it a bit weird that const double = (state, { type }) => ({ value: Math.random() }) does not get persisted even if there are actions before the series of persist/REHYDRATE;
• When it does persist, no more actions are dispatched;
• I was misunderstanding the action names persist/PERSIST and persist/REHYDRATE.

Apparently, everything actually works, I think I’ll close this — but still, an example could save me a day. Maybe I’ll think of creating one.