Redux: Persist Your State – Async LA – Medium

Redux: Persist Your State  #redux #react #reactnative #reactjs #reactjs

  • You create your store from scratch, initialize state, and maybe set some basic state based on the url (if you are in a browser).
  • But the blob could be days, weeks or years old!Redux Persist provides a consistent, performant, and structured way to persist state.If you still require more convincing, read Jani Eväkallio’s piece on offline first applications.Part 2: Architecture2.1 The Component PartsThe “persistence layer” is actually two stateful reactive objects, plus a higher…
  • It also creates register and rehydrate methods which will be used to register each persistoid, and dispatch the actual rehydrate action respectively.PersistoidThe persistoid is the actual state sink.
  • additionally it handles the PURGE action for clearing stored state.2.2 Whats new in Redux Persist v5code splitting reducersbetter integration story for libs (e.g. redux-offline)ability to colocate persistence rules with the reducer it pertains tofirst class migration supportenable PersistGate react component which blocks rendering until persistence is complete (and enables similar patterns…
  • Thats means a consistent story around extensibility, and the ability to use redux-devtools to debug any tricky issues internal to the persistence layer.Ergonomic ReduxVanilla Redux requires a ton of ceremony to use.

When your app reloads, the javascript process has nothing in memory. You create your store from scratch, initialize state, and maybe set some basic state based on the url (if you are in a browser)…

Redux: Persist Your StatePart 1: Why?1.1 Why PersistWhen your app reloads, the javascript process has nothing in memory. You create your store from scratch, initialize state, and maybe set some basic state based on the url (if you are in a browser). In the case of the browser, your url is basically a serialization of state.Not all state is well represented by the url. e.g. user preferences are not appropriate to store in the url as a url is intended to be shareable.It is time consuming and expensive to refetch data every time the page loads. If everything is stored on disk, any given page can be refreshed in milliseconds rather than seconds.There is no url in native contexts. This means the patterns you are used to on the web do not map well to iOS / Android / Electron apps.Offline First. Your users do not have stable internet connections. Persistence is the first step of offline support.1.2 Why Redux PersistThere is no two ways about it, persistence is hard. We are talking about an ever changing blob of state that travels through time at discrete intervals. And when one of these state blobs shows up, the application needs to process it. But the blob could be days, weeks or years old!Redux Persist provides a consistent, performant, and structured way to persist state.If you still require more convincing, read Jani Eväkallio’s piece on offline first applications.Part 2: Architecture2.1 The Component PartsThe “persistence layer” is actually two stateful reactive objects, plus a higher order reducer.PersistorThe…

Redux: Persist Your State – Async LA – Medium