diner
Version:
DinerJS is a re-implementation of Redux that uses a consistent metaphor so you can quickly grasp it.
141 lines (98 loc) • 3.65 kB
Markdown
DinerJS is an implementation of Redux that uses a consistent metaphor so you can quickly grasp it.
I'll be writing more about its design soon enough, and if you want to help make Diner better, please contribute! But in the meantime, here's just the basic usage:
Download it in the command line using npm:
`npm install diner`
Import it into your project:
```javascript
import diner from 'diner';
```
If you want to avoid writing `diner.owner.hire` later you can import the following instead:
```javascript
import {owner} from 'diner';
```
But I'd encourage you not to destructure beyond that: the point here is to encourage thinking in the full metaphor. Who's hiring? The `owner` is. Noun-verb.
Make a `menu`:
```javascript
const menu = {
ADD_TO_TOTAL: 'ADD_TO_TOTAL'
SUBTRACT_FROM_TOTAL: 'SUBTRACT_FROM_TOTAL'
};
```
Define your `waiters`:
```javascript
const addWaiter = (number) => {
return {
menuItem: menu.ADD_TO_TOTAL,
number: number
}
};
```
```javascript
const subtractWaiter = (number) => {
return {
menuItem: menu.SUBTRACT_FROM_TOTAL,
number: number
}
};
```
Set up a clean `bill`:
```javascript
const cleanBill = {total: 0};
```
Write out your `cook`:
```javascript
const mathCook = (dish = cleanBill, order) {
const newDish = Object.assign({}, dish);
switch (order.menuItem) {
case menu.ADD_TO_TOTAL:
newDish.total += order.number;
break;
case menu.SUBTRACT_FROM_TOTAL:
newDish.total -= order.number;
break;
default: return dish;
}
return newDish;
}
```
Are you ready to wire it all together? Me too!
```javascript
const restaurant = owner.hire(mathCook, cleanBill);
```
(Note that the second parameter is optional, and omitting it strengthens the metaphor, making omitting it the Diner Way. It's good practice to initialize your `cleanBill` somewhere, but you can alternately declare it in your `cook`, as above, or _alternately_ alternately you can `restaurant.prepare` it as a `ticket`. But more on `restaurant.prepare` in just a second!)
So that's design. How do we _use_ it?
Give your `order` to your `waiter`. He'll translate it to a `ticket` you can give to the `chef`.
```javascript
const ticket = addWaiter(3);
```
Tell the `chef` to make that `ticket` into a _meal_:
```javascript
restaurant.prepare(ticket);
```
Get your data onto the table where you can eat/use it:
```javascript
const currentTotal = restaurant.serve();
```
That's all you need to get a diner app up and running.
But wait, there's more! Do you have a front end that wants to run a function every time there's a new `dish`? Well!:
```javascript
restaurant.frequent(callbackFunction);
```
Now that `callbackFunction` will run every time your application's state updates.
Does your front end want to stop "listening" to the state? Stop throwing away your old return values. We can use them!
```javascript
const dinersClubMembership = restaurant.frequent(callbackFunction);
```
Then, when your component's ready to leave:
```javascript
dinersClubMembership.leaveDinersClub();
```
That's it!
Now here's what we need to add to make diner a full-functioned Redux-like:
1. Sanity checks. We have literally none! Are you passing the right things in the right places? WHO KNOWS.
2. Clearer docs for those who've never used Redux before.
3. The ability to incorporate middleware. ("Specials"?)
4. The ability to combine reducers. ("Hire a head chef"?)
Want to help? Do one of those things!
Have your own ideas for how to improve DinerJS? Do one of _those_ things.
Thanks for reading!