2021-10-12 18:49:08 +00:00
<!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" >
2021-10-12 17:11:32 +00:00
< 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"
< / 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 >
2021-10-12 22:13:59 +00:00
< / 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 >
