128 lines
2.6 KiB
Markdown
128 lines
2.6 KiB
Markdown
|
|
# What's Updux?
|
|
|
|
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, à la [VueX][]? 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, I had some fun yesterday and hacked a proto-lovechild
|
|
of `Rematch` and `Updeep`, with a dash of [VueX][] inspiration.
|
|
I call it... `Updux`.
|
|
|
|
## Example
|
|
|
|
#### battle.js
|
|
|
|
```
|
|
import { updux } from 'updux';
|
|
|
|
import game from './game';
|
|
import log from './log';
|
|
import bogeys from './bogeys';
|
|
|
|
const { createStore } = updux({
|
|
reducers: { game, log, bogeys }
|
|
})
|
|
|
|
export default createStore;
|
|
```
|
|
|
|
#### game.js
|
|
|
|
|
|
```
|
|
import { updux } from 'updux';
|
|
import _ from 'lodash';
|
|
import u from 'updeep';
|
|
|
|
import { calculateMovement } from 'game/rules';
|
|
|
|
|
|
export default updux({
|
|
initial: { game: "", players: [], turn: 0, },
|
|
mutations: {
|
|
init_game: ({game: { name, players }}) => {name, players},
|
|
play_turn: () => u({ turn: x => x+1 }),
|
|
},
|
|
effects: {
|
|
play_turn: ({getState,dispatch}) => next => action => {
|
|
|
|
const bogeys = api.getState().bogeys;
|
|
|
|
// only allow the turn to be played if
|
|
// all ships have their orders in
|
|
if( bogeys.any( bogey => ! bogey.orders ) ) return;
|
|
|
|
bogeys.forEach( bogey => {
|
|
dispatch.move( calculateMovement(bogey) )
|
|
} );
|
|
|
|
next(action);
|
|
},
|
|
}
|
|
});
|
|
```
|
|
|
|
|
|
#### log.js
|
|
|
|
|
|
```
|
|
import { updux } from 'updux';
|
|
|
|
export default updux({
|
|
initial: [],
|
|
actions: {
|
|
'*': (payload,action) => state => [ ...state, action ],
|
|
},
|
|
});
|
|
```
|
|
|
|
#### bogeys.js
|
|
|
|
```
|
|
import { updux } from 'updux';
|
|
import _ from 'lodash';
|
|
|
|
export default updux({
|
|
initial: [],
|
|
mutations: {
|
|
init_game: ({bogeys}) => () => _.keyBy( bogeys, 'id' ),
|
|
move: ({position}) => u({ position }),
|
|
},
|
|
});
|
|
```
|
|
|
|
|
|
#### myGame.js
|
|
|
|
```
|
|
import Battle from './battle';
|
|
|
|
const battle = Battle();
|
|
|
|
battle.dispatch.init_game({
|
|
name: 'Gemini Prime',
|
|
players: [ 'yenzie' ],
|
|
bogeys: [ { id: 'Enkidu' } ]
|
|
});
|
|
|
|
battle.dispatch.play_game();
|
|
|
|
....
|
|
```
|
|
|
|
|
|
[Redux]: https://redux.js.org
|
|
[rematch]: https://rematch.github.io
|
|
[Updeep]: https://github.com/substantial/updeep
|
|
[VueX]: https://vuex.vuejs.org/
|