redux-keep
Persist your Redux store to a cookie/local storage/wherever you want. Dead simple, no magic 🙅🏾♀️✨.
redux-persist is powerful, but the API is big and there are a lot of things to learn. redux-keep has a simple API and reuses concepts already central to redux so you can get in, get out and get on with your life.
Installation
npm install --save redux-keep
or
yarn add redux-keep
Getting Started 🏎
redux-keep makes persisting your store simple by using two core Redux concepts: selectors and reducers.
Saving your state 💾
Selectors already decouple your components from the shape of your state, so why not have them do the same when you're persisting it?
Every time your store updates, redux-keep gets the output of your selector and persists it. It's smart, so it won't run again if the output doesn't change!
Note: here we're creating the keeps in the same place as the store creation, but you can just as easily do it close to the reducers if you'd rather organize your modules that way.
;;; ; const keeps = ;; const store = ; store;
Loading your state 🔄
Reducers are made to calculate new state, so why not let them figure out how to merge persisted state back in?
When you call keepStore
, redux-keep will load the persisted state and dispatch it as the payload of an action with type HYDRATE
. The persisted state will be available under the key specified in the keep options.
; { }
Customizing 👩🏼🔧
By default, your state will be stringified and parsed as JSON. If you need finer control over how your state is transformed, you can specify save
and load
functions:
;
Writing your own storage 👨🏿🔬
Writing your own storage is simple! It's just an object with three functions: get
, set
, and remove
. They'll each receive the keep's key as the first argument.
get
should return the persisted state — preferably as a string, since the default load
function tries to parse it as JSON!
set
receives the output of the selector as its second argument. Unless you use a custom save
function, it'll already by stringified.
const localStorage = return localStorage; localStorage; { localStorage; };