{Persist}ence is Key: Using Redux-Persist to Store Your State in LocalStorage

Isn’t it funny how “advances in technology” which are meant to make our lives easier often end up causing more complications? React and Redux are amazing and incredibly useful tools, but it can be frustrating when you run into limitations trying to do things that seem like they should be simple.

I’ve been using Redux to overhaul an already-existing React project over the past week, having taught myself Redux with online videos and reading documentation. Aside from the initial learning curve, it has been extremely helpful in allowing me to clean up and organize my code. However, there have been a lot of roadblocks.

Most recently, I spent a few hours trying to figure out the best way to persist your Redux state in the browser. You could certainly go with Dan Abramov’s approach and write the code to persist the state in LocalStorage from scratch (he is the creator of Redux, after all), but why would you want to do that when there are — SURPRISE — already a dozen node modules that will do the job for you. Gleefully you search for such modules, find one, follow its instructions and…get errors. Surprise again — the documentation sucks. You look for help online — oh no, everyone is explaining how to use it, but NOT in a React environment. WTF!? Screw it, you think, and angrily uninstall this useless module. You find another, npm install it, but can’t get it to work — a quick search on StackOverflow reveals that — SURPRISE AGAIN — this one has already fallen out of favor and is no longer supported.

For anyone in this same situation, I will save you the time it took me and show you what I did, which I finally was able to make work. I ended up using ‘redux-persist’; I pray to God for your sake that it is still supported by the time you read this, and you don’t end up back at square one like me!

1. Npm install ‘redux-persist’ as a dependency.

Self-explanatory. Go to the command line and install the package.

2. Add redux-persist middleware to your Redux store

Go to the file where you configure your Redux store (mine was in a file named “ReduxStore” in a directory named “config”). You will need to import {compose} and {createStore} from ‘redux’, as well as {applyMiddleware} if you are using any other middleware. You will then want to import {autoRehydrate} (no idea where they came up with that wacky term) and {persistStore} from ‘redux-persist’. Finally, you will of course want to import your reducers.

You will then create the store variable as shown below. If you are using other middleware, pass these as arguments to ‘applyMiddleware’ and then pass applyMiddleware as a second argument to compose. Finally, call persistStore with your newly-created store variable as an argument to apply what you just set up, and export default store.

Code showing how to set up your redux-persist middleware

There are, of course, a handful of other parameters and callbacks which redux-persist allows to further customize your middleware, but this is all you will need to get started with the most basic implementation.

3. Write an action creator to capture the persisted state

Everything up to this point can be gleaned from redux-persist’s documentation (although imo they do not explain it quite as clearly). But what comes next? How do you actually implement this weird “autoRehydration” nonsense?

The first time I used redux-persist, I thought that it was not working, because I did not see the state that was supposedly persisting reflected when the page was rendered. However, I luckily had ‘redux-logger’ applied as a dev middleware, which handily console.logs both a snapshot of the Redux state every time it is modified as well as a snapshot of any action creators which are emitted to alter the state. That was how I eventually figured out what “autoRehydrate” was doing behind the scenes…

Console log from redux-logger middleware showing the ‘REHYDRATE’ action being emitted by redux-persist

It turned out redux-persist was indeed persisting my state, and then emitting an action creator when the page loaded with the previous state as a payload. All I had to do was write a reducer which would listen for an action of type ‘persist/REHYDRATE’ (still think that was a weird word-choice, but whatever). The payload is your entire state from the last time the app was loaded, so you can set the entire thing or pick from payload the parts of the state you want to persist.

The reducer I wrote to reload the persisted state

And that’s it!

Now even if your user clicks away from a page or refreshes, the relevant information which you had saved in state will still be there. Thank you, redux-persist, for this handy service!