docs/index.html
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@weavedev/redux-local-storage - v0.1.0</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">@weavedev/redux-local-storage - v0.1.0</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
<input type="checkbox" id="tsd-filter-only-exported" />
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<li>
<a href="globals.html">Globals</a>
</li>
</ul>
<h1> @weavedev/redux-local-storage - v0.1.0</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<a href="#redux-local-storage" id="redux-local-storage" style="color: inherit; text-decoration: none;">
<h1>redux-local-storage</h1>
</a>
<p><a href="https://travis-ci.org/weavedev/redux-local-storage"><img src="https://img.shields.io/travis/weavedev/redux-local-storage.svg" alt="Build Status - Travis CI"></a>
<a href="https://codeclimate.com/github/weavedev/redux-local-storage/test_coverage"><img src="https://img.shields.io/codeclimate/coverage/weavedev/redux-local-storage.svg" alt="Test Coverage - Code Climate"></a>
<a href="https://github.com/weavedev/redux-local-storage/blob/master/LICENSE"><img src="https://img.shields.io/github/license/weavedev/redux-local-storage.svg" alt="GPL-3.0"></a>
<a href="https://www.npmjs.com/package/@weavedev/redux-local-storage"><img src="https://img.shields.io/npm/v/@weavedev/redux-local-storage.svg" alt="NPM"></a></p>
<p>LocalStorage management wrapper for <a href="https://github.com/weavedev/reduxable/">reduxables</a> like <a href="https://github.com/weavedev/redux-async/">redux-async</a>.</p>
<a href="#install" id="install" style="color: inherit; text-decoration: none;">
<h2>Install</h2>
</a>
<pre><code>npm i <span class="hljs-symbol">@weavedev</span>/redux-<span class="hljs-keyword">local</span>-storage</code></pre>
<a href="#api-documentation" id="api-documentation" style="color: inherit; text-decoration: none;">
<h2>API documentation</h2>
</a>
<p>We generate API documentation with <a href="https://typedoc.org">TypeDoc</a>.</p>
<p><a href="https://weavedev.github.io/redux-local-storage/"><img src="https://img.shields.io/badge/API-Documentation-blue?style=for-the-badge&logo=typescript" alt="API Documentation"></a></p>
<a href="#usage" id="usage" style="color: inherit; text-decoration: none;">
<h2>Usage</h2>
</a>
<a href="#creating" id="creating" style="color: inherit; text-decoration: none;">
<h3>Creating</h3>
</a>
<p>In this example we wrap a <a href="https://github.com/weavedev/redux-async/">ReduxAsync</a> object in a ReduxLocalStorage object to save state changes to localStorage and load existing state from localStorage on init.</p>
<pre><code class="language-ts"><span class="hljs-keyword">import</span> { ReduxAsync } <span class="hljs-keyword">from</span> <span class="hljs-string">'@weavedev/redux-async'</span>;
<span class="hljs-keyword">import</span> { ReduxLocalStorage } <span class="hljs-keyword">from</span> <span class="hljs-string">'@weavedev/redux-local-storage'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> storedResource = <span class="hljs-keyword">new</span> ReduxLocalStorage(<span class="hljs-keyword">new</span> ReduxAsync( ... ), <span class="hljs-string">'localStorageKey'</span>);
<span class="hljs-comment">// If you are also using our store package (@weavedev/store)</span>
<span class="hljs-built_in">window</span>.storeReducers.storedResource = storedResource.reducer;
<span class="hljs-built_in">window</span>.storeSagas.storedResource = storedResource.saga;
<span class="hljs-keyword">declare</span> global {
<span class="hljs-keyword">interface</span> StoreReducersMap {
storedResource: <span class="hljs-keyword">typeof</span> storedResource.reducer;
}
<span class="hljs-keyword">interface</span> StoreActionsMap {
storedResource: <span class="hljs-keyword">typeof</span> storedResource.actions;
}
}</code></pre>
<a href="#options" id="options" style="color: inherit; text-decoration: none;">
<h3>Options</h3>
</a>
<p>You can change the saving behaviour by providing an options object.</p>
<pre><code class="language-ts"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> storedResource = <span class="hljs-keyword">new</span> ReduxLocalStorage(
<span class="hljs-keyword">new</span> ReduxAsync( ... ),
<span class="hljs-string">'localStorageKey'</span>,
reduxLocalStorageOptions,
);</code></pre>
<a href="#options-object" id="options-object" style="color: inherit; text-decoration: none;">
<h4>Options object</h4>
</a>
<pre><code class="language-ts">{
<span class="hljs-comment">/**
* Add a custom transformer between localStorage and the runtime state.
* Usefull for objects that can not be serialized.
*/</span>
transform: {
<span class="hljs-comment">// Convert saved state to runtime state</span>
read: (s: <span class="hljs-built_in">string</span>): <span class="hljs-function"><span class="hljs-params">MyAsyncState</span> =></span> ({ data: s }),
<span class="hljs-comment">// Convert runtime state to saved state</span>
write: (s: MyAsyncState): <span class="hljs-function"><span class="hljs-params">string</span> =></span> s.data,
},
<span class="hljs-comment">/**
* By default ReduxLocalStorage saves to localStorage whenever the state changed.
* If you only want to save on specific action types you can provide an array.
*/</span>
triggers: [<span class="hljs-string">'MY_ASYNC_ACTION_TRIGGER'</span>, <span class="hljs-string">'MY_ASYNC_ACTION_CALLBACK'</span>],
}</code></pre>
<a href="#license" id="license" style="color: inherit; text-decoration: none;">
<h2>License</h2>
</a>
<p><a href="https://github.com/weavedev/redux-local-storage/blob/master/LICENSE">GPL-3.0</a></p>
<p>Made by <a href="https://github.com/gerarts">Paul Gerarts</a> and <a href="https://weave.nl">Weave</a></p>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="globals.html"><em>Globals</em></a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_reduxlocalstorage_.html">"<wbr>Redux<wbr>Local<wbr>Storage"</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
<li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script>
</body>
</html>