redux-browser-storage
Use redux to manage specific data saved in either localStorage or sessionStorage
Table of contents
Installation
$ npm i redux-browser-storage --save
Usage
Include the storage type(s) you want into your standard store creation, assigning to any name you would like.
;; const reducers = ; reducers;
Connect your component to redux, and when you want to update the values use the provided redux actions.
;;; const mapStateToProps = { return local ;}; const mapDispatchToProps = ...localActions; @ { thisprops; }; { return <button onClick=thisonClickButton type="button" > Count: thispropslocalcount || 0 </button> }
All data values in your reducer are automatically synced to their respective browser storage, and the reducer's initial state is based off of existing values in that storage, so all saved values are automatically rehydrated on page load.
API
localActions
clearLocalValues
clearLocalValues()
Clears the values in localStorage
that were stored via redux-browser-storage
.
{ thisprops;};
deleteLocalValues
deleteLocalValues(keys: (Array<string>|string))
Deletes the value(s) at the location of keys
in localStorage
. Nested values are allowed by use of dot or bracket notation.
// standard; // Nested; // multiple;
setLocalValues
setLocalValues(values: Object)
Sets the value(s) in localStorage
based on the keys of the object passed. Nested values are allowed by use of dot or bracket notation.
// standard; // Nested; // multiple;
sessionActions
clearSessionValues
clearSessionValues()
Clears the values in sessionStorage
that were stored via redux-browser-storage
.
;
deleteSessionValues
deleteSessionValues(keys: (Array<string>|string))
Deletes the value(s) at the location of keys
in sessionStorage
. Nested values are allowed by use of dot or bracket notation.
// standard; // Nested; // multiple;
setSessionValues
setSessionValues(values: Object)
Sets the value(s) in sessionStorage
based on the keys of the object passed. Nested values are allowed by use of dot or bracket notation.
// standard; // Nested; // multiple;
localReducer
Handles storage of items in localStorage
. This can be assigned to any key you'd like when using combineReducers
, it is not prescriptive.
;
sessionReducer
Handles storage of items in sessionStorage
. This can be assigned to any key you'd like when using combineReducers
, it is not prescriptive.
;
Development
Standard stuff, clone the repo and npm i
to get the dependencies. npm scripts available:
build
=> builds the distributed JS withNODE_ENV=development
and with sourcemapsbuild:minified
=> builds the distributed JS withNODE_ENV=production
and minifiedclean
=> removeslib
anddist
foldersdev
=> runs the webpack dev server for the playgroundlint
=> runs ESLint against files in thesrc
folderlint:fix
=> runs ESLint against files in thesrc
folder and fixes any fixable issues discoveredprepublish
=> if in publish, runsprepublish:compile
prepublish:compile
=> runs thelint
,test:coverage
,clean
,transpile
,build
, andbuild:minified
scriptstest
=> runava
with NODE_ENV=testtest:coverage
=> runava
withnyc
to calculate code coveragetest:watch
=> runstest
but with persistent watchertranspile
=> runs Babel against files insrc
to files inlib