React Boilerplate Redux Persist Production Issue

One of the most infuriating issues I faced when developing a React Boilerplate front end was when we did a production compile deploy, we realized that our Redux Persist localStorage was not synchronizing properly with our reducers.

This issue is repeatable across all machines tested and when we deployed a development build, it seems to work fine.

After hours of fruitless research and all that, a friend of mine, Matt showed me whats up.

Since React Boilerplate does not come built in with with Redux Persist, one has to bolt it on ourselves. The setup I did has worked before on a previous version of React Boilerplate but the latest one at the time of this writing, does not seem to like it, or rather I missed a few steps.

Apparently, the issue stems from the fact that what a page is refreshed by chaging the URL manually, navigating pages with different reducers or when initialState is returned, reducers may be injected twice, causing Redix Persist to get confused and does not refresh the localStorage store.

Rather than go through line by line, I decided to just paste the code and the file path here for a quick fix and exact details can be ironed out by your own research.

See the Gists below:

Those 2 files solved the issue. In configureStore.js, the part of interest is:

// inject persistor too to make it available const persistor = persistStore(store); store.persistor = persistor;

What that does is that it ensures that the store contains the persistors, making sure that it does not dissapear.

The second bit is in reducerInjector.js:

if (store.dispatch) { // dispatch persist action store.persistor.persist(); }

This seems to tie things up together.

I wish I had more time to have a more detailed explanation but hey, at least you can try this and most likely fix your reducer and redux-persist data not being in sync ;)