React-Redux: Persisting State With Local Storage

Contents

Intro

There are many instances where it is useful to store pieces of data from our Redux store in the browsers local storage so that they will persist for the user if they refresh the browser.

In this specific example we will be storing authentication JWT tokens so that our users are not immediately logged out of the application if they refresh the page.

Resources

This tutorial is by Dan Abramov (co-creator of Redux).

egghead.io - javascript redux persisting the state to the local storage

Serialization

One of the pre-requisite concepts here is serialization. This quote from StackOverflow sums it up nicely.

StackOverflow: What is Serialization

Simply speaking Serialization is a process of converting an Object into stream of bytes so that it can be transferred over a network or stored in a persistent storage.

Deserialization is the exact opposite - Fetch a stream of bytes from network or persistence storage and convert it back to the Object with the same state.

This is exactly why the Redux documentation specifically recommends that you do not put non-serializable items into your redux store.

Redux Docs: Can I put functions, promises, or other non-serializable items in my store state?