So, I'm a fan of Redux. Two days ago I discovered - rematch alonside a few other frameworks built atop Redux.
-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!
-But it also enforces a flat hierarchy of reducers -- where - is the fun in that? And I'm also having a strong love for - Updeep, so I want reducer state updates to leverage the heck out of it.
-All that to say, say hello to Updux. Heavily inspired by rematch, but twisted
- to work with updeep and to fit my peculiar needs. It offers features such as
dispatch object of the
- store.Fair warning: this package is still very new, probably very buggy, - definitively very badly documented, and very subject to changes. Caveat - Maxima Emptor.
- -import updux from 'updux';
-
-import otherUpdux from './otherUpdux';
-
-const {
- initial,
- reducer,
- actions,
- middleware,
- createStore,
-} = new Updux({
- initial: {
- counter: 0,
- },
- subduxes: {
- otherUpdux,
- },
- mutations: {
- inc: ( increment = 1 ) => u({counter: s => s + increment })
- },
- effects: {
- '*' => api => next => action => {
- console.log( "hey, look, an action zoomed by!", action );
- next(action);
- };
- },
- actions: {
- customAction: ( someArg ) => ({
- type: "custom",
- payload: { someProp: someArg }
- }),
- },
-
-});
-
-const store = createStore();
-
-store.dispatch.inc(3);The formal documentation of the class Updux and its associated functions and - types can be found over here.
- -If you are creating upduxes that will be used as subduxes - by other upduxes, or as - ducks-like containers, I - recommend that you export the Updux instance as the default export:
-import Updux from 'updux';
-
-const updux = new Updux({ ... });
-
-export default updux;Then you can use them as subduxes like this:
-import Updux from 'updux';
-import foo from './foo'; // foo is an Updux
-import bar from './bar'; // bar is an Updux as well
-
-const updux = new Updux({
- subduxes: {
- foo, bar
- }
-});Or if you want to use it:
-import updux from './myUpdux';
-
-const {
- reducer,
- actions: { doTheThing },
- createStore,
- middleware,
-} = updux;Say you have a todos state that is an array of todo sub-states. It's easy
- enough to have the main reducer maps away all items to the sub-reducer:
const todo = new Updux({
- mutations: {
- review: () => u({ reviewed: true}),
- done: () => u({done: true}),
- },
-});
-
-const todos = new Updux({ initial: [] });
-
-todos.addMutation(
- todo.actions.review,
- (_,action) => state => state.map( todo.upreducer(action) )
-);
-todos.addMutation(
- todo.actions.done,
- (id,action) => u.map(u.if(u.is('id',id), todo.upreducer(action))),
-);
-But updeep can iterate through all the items of an array (or the values of
- an object) via the special key *. So the todos updux above could also be
- written:
const todo = new Updux({
- mutations: {
- review: () => u({ reviewed: true}),
- done: () => u({done: true}),
- },
-});
-
-const todos = new Updux({
- subduxes: { '*': todo },
-});
-
-todos.addMutation(
- todo.actions.done,
- (id,action) => u.map(u.if(u.is('id',id), todo.upreducer(action))),
- true
-);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.
- -While Updux was created with Updeep in mind, it also plays very - well with Immer.
-For example, taking this basic updux:
-import Updux from 'updux';
-
-const updux = new Updux({
- initial: { counter: 0 },
- mutations: {
- add: (inc=1) => state => { counter: counter + inc }
- }
-});
-Converting it to Immer would look like:
-import Updux from 'updux';
-import { produce } from 'Immer';
-
-const updux = new Updux({
- initial: { counter: 0 },
- mutations: {
- add: (inc=1) => produce( draft => draft.counter += inc ) }
- }
-});
-But since typing produce over and over is no fun, groomMutations
- can be used to wrap all mutations with it:
import Updux from 'updux';
-import { produce } from 'Immer';
-
-const updux = new Updux({
- initial: { counter: 0 },
- groomMutations: mutation => (...args) => produce( mutation(...args) ),
- mutations: {
- add: (inc=1) => draft => draft.counter += inc
- }
-});
-Generated using TypeDoc
-