updux/docs/README.md

68 lines
1.9 KiB
Markdown
Raw Normal View History

2021-10-12 22:13:59 +00:00
## What's Updux?
2020-01-28 15:51:20 +00:00
2020-06-02 20:00:48 +00:00
So, I'm a fan of [Redux](https://redux.js.org).
2020-01-28 15:51:20 +00:00
2020-06-02 20:00:48 +00:00
As I was looking into tools to help cut on its boilerplate,
I came across [rematch](https://rematch.github.io/rematch).
2020-06-03 17:04:59 +00:00
It has some pretty darn good ideas.
2020-01-28 15:51:20 +00:00
But it also enforces a flat hierarchy of reducers -- where
2021-10-12 22:13:59 +00:00
is the fun in that?
I'm also having a strong love for
[Updeep](https://github.com/substantial/updeep), so I wanted a framework where
I could use it to define reducer state updates.
2020-01-28 15:51:20 +00:00
2020-06-02 20:00:48 +00:00
Hence: `Updux`. Heavily inspired by `rematch`, but twisted
2020-01-28 15:51:20 +00:00
to work with `updeep` and to fit my peculiar needs. It offers features such as
2021-10-12 22:13:59 +00:00
* Mimic the way VueX has mutations (per-action reducer logic) and
2020-01-28 15:51:20 +00:00
effects (middleware reacting to actions that can be asynchronous and/or
2020-06-03 17:04:59 +00:00
have side-effects), so all things pertaining to a store are defined
2020-01-28 15:51:20 +00:00
in the space place.
* Automatically gather all actions used by the updux's effects and mutations,
and makes then accessible as attributes to the `dispatch` object of the
store.
* Mutations have a signature that is friendly to Updux and Immer.
2020-06-02 20:00:48 +00:00
* Mutations auto-unwrapping the payload of actions for you.
2021-10-12 22:13:59 +00:00
* TypeScript support.
2020-01-28 15:51:20 +00:00
2020-06-02 20:00:48 +00:00
**Fair warning**: this package is still very new, likely to go through
big changes before I find the perfect balance between ease of use and sanity.
Caveat Emptor.
2020-01-28 15:51:20 +00:00
# Synopsis
2021-10-12 22:13:59 +00:00
```js
import { Updux } from 'updux';
import u from 'updeep';
import add from 'lodash/fp/add.js';
2020-06-02 20:00:48 +00:00
import otherDux from './otherUpdux';
2020-01-28 15:51:20 +00:00
2021-10-12 22:13:59 +00:00
const dux = new Updux({
2020-01-28 15:51:20 +00:00
initial: {
counter: 0,
},
actions: {
2021-10-12 22:13:59 +00:00
inc: null
2020-01-28 15:51:20 +00:00
},
2020-06-02 20:00:48 +00:00
subduxes: {
otherDux,
}
2020-01-28 15:51:20 +00:00
});
2021-10-12 22:13:59 +00:00
dux.setMutation('inc', (increment) => u({ counter: add(increment) }));
2020-06-02 20:00:48 +00:00
2021-10-12 22:13:59 +00:00
dux.addEffect( '*', api => next => action => {
2020-06-02 20:00:48 +00:00
console.log( "hey, look, an action zoomed by!", action );
next(action);
} );
2021-10-12 22:13:59 +00:00
const store = dux.createStore();
2020-01-28 15:51:20 +00:00
2021-10-12 22:13:59 +00:00
store.dispatch.inc(1);
2020-01-28 15:51:20 +00:00
2021-10-12 22:13:59 +00:00
console.log( store.getState().counter ); // prints 1
2020-01-28 15:51:20 +00:00
```