92 lines
26 KiB
HTML
92 lines
26 KiB
HTML
<!DOCTYPE html><html class="default no-js"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Updux</title><meta name="description" content="Documentation for Updux"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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">Updux</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></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"><h1>Updux</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="#what39s-updux" id="what39s-updux" style="color: inherit; text-decoration: none;">
|
|
<h1>What's Updux?</h1>
|
|
</a>
|
|
<p>So, I'm a fan of <a href="https://redux.js.org">Redux</a>. Two days ago I discovered
|
|
<a href="https://rematch.github.io/rematch">rematch</a> alonside a few other frameworks built atop Redux.</p>
|
|
<p>It has a couple of pretty good ideas that removes some of the
|
|
boilerplate. Keeping mutations and asynchronous effects close to the
|
|
reducer definition? Nice. Automatically infering the
|
|
actions from the said mutations and effects? Genius!</p>
|
|
<p>But it also enforces a flat hierarchy of reducers -- where
|
|
is the fun in that? And I'm also having a strong love for
|
|
<a href="https://github.com/substantial/updeep">Updeep</a>, so I want reducer state updates to leverage the heck out of it.</p>
|
|
<p>All that to say, say hello to <code>Updux</code>. Heavily inspired by <code>rematch</code>, but twisted
|
|
to work with <code>updeep</code> and to fit my peculiar needs. It offers features such as</p>
|
|
<ul>
|
|
<li>Mimic the way VueX has mutations (reducer reactions to specific actions) and
|
|
effects (middleware reacting to actions that can be asynchronous and/or
|
|
have side-effects), so everything pertaining to a store are all defined
|
|
in the space place.</li>
|
|
<li>Automatically gather all actions used by the updux's effects and mutations,
|
|
and makes then accessible as attributes to the <code>dispatch</code> object of the
|
|
store.</li>
|
|
<li>Mutations have a signature that is friendly to Updux and Immer.</li>
|
|
<li>Also, the mutation signature auto-unwrap the payload of the actions for you.</li>
|
|
<li>TypeScript types.</li>
|
|
</ul>
|
|
<p>Fair warning: this package is still very new, probably very buggy,
|
|
definitively very badly documented, and very subject to changes. Caveat
|
|
Maxima Emptor.</p>
|
|
|
|
<a href="#synopsis" id="synopsis" style="color: inherit; text-decoration: none;">
|
|
<h1>Synopsis</h1>
|
|
</a>
|
|
<pre><code><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">updux</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'updux'</span><span class="hl-1">;</span><br/><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">otherUpdux</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'./otherUpdux'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">initial</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">reducer</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">actions</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">middleware</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">createStore</span><span class="hl-1">,</span><br/><span class="hl-1">} = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">initial:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">counter:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">subduxes:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">otherUpdux</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">mutations:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">inc</span><span class="hl-2">:</span><span class="hl-1"> ( </span><span class="hl-2">increment</span><span class="hl-1"> = </span><span class="hl-7">1</span><span class="hl-1"> ) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6">u</span><span class="hl-1">({</span><span class="hl-6">counter</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-2">s</span><span class="hl-1"> </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">s</span><span class="hl-1"> + </span><span class="hl-2">increment</span><span class="hl-1"> })</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">effects:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">'*'</span><span class="hl-2"> => api => next => action => {</span><br/><span class="hl-2"> console.log( </span><span class="hl-3">"hey, look, an action zoomed by!"</span><span class="hl-1">, action );</span><br/><span class="hl-1"> </span><span class="hl-6">next</span><span class="hl-1">(</span><span class="hl-2">action</span><span class="hl-1">);</span><br/><span class="hl-1"> };</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">actions</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-6">customAction</span><span class="hl-2">:</span><span class="hl-1"> ( </span><span class="hl-2">someArg</span><span class="hl-1"> ) </span><span class="hl-4">=></span><span class="hl-1"> ({</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">"custom"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">payload:</span><span class="hl-1"> { </span><span class="hl-2">someProp:</span><span class="hl-1"> </span><span class="hl-2">someArg</span><span class="hl-1"> }</span><br/><span class="hl-1"> }),</span><br/><span class="hl-1"> },</span><br/><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">store</span><span class="hl-1"> = </span><span class="hl-6">createStore</span><span class="hl-1">();</span><br/><br/><span class="hl-2">store</span><span class="hl-1">.</span><span class="hl-2">dispatch</span><span class="hl-1">.</span><span class="hl-6">inc</span><span class="hl-1">(</span><span class="hl-7">3</span><span class="hl-1">);</span>
|
|
</code></pre>
|
|
|
|
<a href="#description" id="description" style="color: inherit; text-decoration: none;">
|
|
<h1>Description</h1>
|
|
</a>
|
|
<p>Full documentation can be <a href="https://yanick.github.io/updux/">found here</a>.
|
|
Right now the best way to understand the whole thing is to go
|
|
through the <a href="https://yanick.github.io/updux/#/tutorial">tutorial</a></p>
|
|
|
|
<a href="#exporting-upduxes" id="exporting-upduxes" style="color: inherit; text-decoration: none;">
|
|
<h2>Exporting upduxes</h2>
|
|
</a>
|
|
<p>If you are creating upduxes that will be used as subduxes
|
|
by other upduxes, or as
|
|
<a href="https://github.com/erikras/ducks-modular-redux">ducks</a>-like containers, I
|
|
recommend that you export the Updux instance as the default export:</p>
|
|
<pre><code><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">Updux</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'updux'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">updux</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({ ... });</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-0">default</span><span class="hl-1"> </span><span class="hl-2">updux</span><span class="hl-1">;</span>
|
|
</code></pre>
|
|
<p>Then you can use them as subduxes like this:</p>
|
|
<pre><code><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">Updux</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'updux'</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">foo</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'./foo'</span><span class="hl-1">; </span><span class="hl-8">// foo is an Updux</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">bar</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'./bar'</span><span class="hl-1">; </span><span class="hl-8">// bar is an Updux as well</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">updux</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">subduxes:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">foo</span><span class="hl-1">, </span><span class="hl-2">bar</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
</code></pre>
|
|
<p>Or if you want to use it:</p>
|
|
<pre><code><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">updux</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'./myUpdux'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">reducer</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">actions</span><span class="hl-1">: { </span><span class="hl-5">doTheThing</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-5">createStore</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">middleware</span><span class="hl-1">,</span><br/><span class="hl-1">} = </span><span class="hl-2">updux</span><span class="hl-1">;</span>
|
|
</code></pre>
|
|
|
|
<a href="#mapping-a-mutation-to-all-values-of-a-state" id="mapping-a-mutation-to-all-values-of-a-state" style="color: inherit; text-decoration: none;">
|
|
<h2>Mapping a mutation to all values of a state</h2>
|
|
</a>
|
|
<p>Say you have a <code>todos</code> state that is an array of <code>todo</code> sub-states. It's easy
|
|
enough to have the main reducer maps away all items to the sub-reducer:</p>
|
|
<pre><code><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">todo</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">mutations:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">review</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6">u</span><span class="hl-1">({ </span><span class="hl-2">reviewed:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1">}),</span><br/><span class="hl-1"> </span><span class="hl-6">done</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6">u</span><span class="hl-1">({</span><span class="hl-2">done:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1">}),</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">todos</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({ </span><span class="hl-2">initial:</span><span class="hl-1"> [] });</span><br/><br/><span class="hl-2">todos</span><span class="hl-1">.</span><span class="hl-6">addMutation</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-2">todo</span><span class="hl-1">.</span><span class="hl-2">actions</span><span class="hl-1">.</span><span class="hl-2">review</span><span class="hl-1">,</span><br/><span class="hl-1"> (</span><span class="hl-2">_</span><span class="hl-1">,</span><span class="hl-2">action</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">state</span><span class="hl-1"> </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">state</span><span class="hl-1">.</span><span class="hl-6">map</span><span class="hl-1">( </span><span class="hl-2">todo</span><span class="hl-1">.</span><span class="hl-6">upreducer</span><span class="hl-1">(</span><span class="hl-2">action</span><span class="hl-1">) )</span><br/><span class="hl-1">);</span><br/><span class="hl-2">todos</span><span class="hl-1">.</span><span class="hl-6">addMutation</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-2">todo</span><span class="hl-1">.</span><span class="hl-2">actions</span><span class="hl-1">.</span><span class="hl-2">done</span><span class="hl-1">,</span><br/><span class="hl-1"> (</span><span class="hl-2">id</span><span class="hl-1">,</span><span class="hl-2">action</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">u</span><span class="hl-1">.</span><span class="hl-6">map</span><span class="hl-1">(</span><span class="hl-2">u</span><span class="hl-1">.</span><span class="hl-6">if</span><span class="hl-1">(</span><span class="hl-2">u</span><span class="hl-1">.</span><span class="hl-6">is</span><span class="hl-1">(</span><span class="hl-3">'id'</span><span class="hl-1">,</span><span class="hl-2">id</span><span class="hl-1">), </span><span class="hl-2">todo</span><span class="hl-1">.</span><span class="hl-6">upreducer</span><span class="hl-1">(</span><span class="hl-2">action</span><span class="hl-1">))),</span><br/><span class="hl-1">);</span><br/>
|
|
</code></pre>
|
|
<p>But <code>updeep</code> can iterate through all the items of an array (or the values of
|
|
an object) via the special key <code>*</code>. So the todos updux above could also be
|
|
written:</p>
|
|
<pre><code><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">todo</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">mutations:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">review</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6">u</span><span class="hl-1">({ </span><span class="hl-2">reviewed:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1">}),</span><br/><span class="hl-1"> </span><span class="hl-6">done</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6">u</span><span class="hl-1">({</span><span class="hl-2">done:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1">}),</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">todos</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">subduxes:</span><span class="hl-1"> { </span><span class="hl-3">'*'</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-2">todo</span><span class="hl-1"> },</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-2">todos</span><span class="hl-1">.</span><span class="hl-6">addMutation</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-2">todo</span><span class="hl-1">.</span><span class="hl-2">actions</span><span class="hl-1">.</span><span class="hl-2">done</span><span class="hl-1">,</span><br/><span class="hl-1"> (</span><span class="hl-2">id</span><span class="hl-1">,</span><span class="hl-2">action</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">u</span><span class="hl-1">.</span><span class="hl-6">map</span><span class="hl-1">(</span><span class="hl-2">u</span><span class="hl-1">.</span><span class="hl-6">if</span><span class="hl-1">(</span><span class="hl-2">u</span><span class="hl-1">.</span><span class="hl-6">is</span><span class="hl-1">(</span><span class="hl-3">'id'</span><span class="hl-1">,</span><span class="hl-2">id</span><span class="hl-1">), </span><span class="hl-2">todo</span><span class="hl-1">.</span><span class="hl-6">upreducer</span><span class="hl-1">(</span><span class="hl-2">action</span><span class="hl-1">))),</span><br/><span class="hl-1"> </span><span class="hl-4">true</span><br/><span class="hl-1">);</span>
|
|
</code></pre>
|
|
<p>The advantages being that the actions/mutations/effects of the subdux will be
|
|
imported by the root updux as usual, and all actions that aren't being
|
|
overridden by a sink mutation will trickle down automatically.</p>
|
|
|
|
<a href="#usage-with-immer" id="usage-with-immer" style="color: inherit; text-decoration: none;">
|
|
<h2>Usage with Immer</h2>
|
|
</a>
|
|
<p>While Updux was created with Updeep in mind, it also plays very
|
|
well with <a href="https://immerjs.github.io/immer/docs/introduction">Immer</a>.</p>
|
|
<p>For example, taking this basic updux:</p>
|
|
<pre><code><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">Updux</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'updux'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">updux</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">initial:</span><span class="hl-1"> { </span><span class="hl-2">counter:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">mutations:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">add</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">inc</span><span class="hl-1">=</span><span class="hl-7">1</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">state</span><span class="hl-1"> </span><span class="hl-4">=></span><span class="hl-1"> { </span><span class="hl-9">counter</span><span class="hl-1">: </span><span class="hl-2">counter</span><span class="hl-1"> + </span><span class="hl-2">inc</span><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span><br/>
|
|
</code></pre>
|
|
<p>Converting it to Immer would look like:</p>
|
|
<pre><code><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">Updux</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'updux'</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">produce</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'Immer'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">updux</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">initial:</span><span class="hl-1"> { </span><span class="hl-2">counter:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">mutations:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">add</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">inc</span><span class="hl-1">=</span><span class="hl-7">1</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6">produce</span><span class="hl-1">( </span><span class="hl-2">draft</span><span class="hl-1"> </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">draft</span><span class="hl-1">.</span><span class="hl-2">counter</span><span class="hl-1"> += </span><span class="hl-2">inc</span><span class="hl-1"> ) }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span><br/>
|
|
</code></pre>
|
|
<p>But since typing <code>produce</code> over and over is no fun, <code>groomMutations</code>
|
|
can be used to wrap all mutations with it:</p>
|
|
<pre><code><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">Updux</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'updux'</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">produce</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'Immer'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">updux</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Updux</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">initial:</span><span class="hl-1"> { </span><span class="hl-2">counter:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-6">groomMutations</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-2">mutation</span><span class="hl-1"> </span><span class="hl-4">=></span><span class="hl-1"> (...</span><span class="hl-2">args</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6">produce</span><span class="hl-1">( </span><span class="hl-6">mutation</span><span class="hl-1">(...</span><span class="hl-2">args</span><span class="hl-1">) ),</span><br/><span class="hl-1"> </span><span class="hl-2">mutations:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">add</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">inc</span><span class="hl-1">=</span><span class="hl-7">1</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">draft</span><span class="hl-1"> </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">draft</span><span class="hl-1">.</span><span class="hl-2">counter</span><span class="hl-1"> += </span><span class="hl-2">inc</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span><br/>
|
|
</code></pre>
|
|
</div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li><li class=" tsd-kind-namespace"><a href="modules/_updux_.html">"updux"</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-type-alias"><a href="modules.html#ActionGenerator" class="tsd-kind-icon">Action<wbr/>Generator</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#Dict" class="tsd-kind-icon">Dict</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#Mutation" class="tsd-kind-icon">Mutation</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></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/main.js"></script></body></html> |