diner

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:

import diner from 'diner';

If you want to avoid writing diner.owner.hire later you can import the following instead:

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:

const menu = {
    ADD_TO_TOTAL: 'ADD_TO_TOTAL'
    SUBTRACT_FROM_TOTAL: 'SUBTRACT_FROM_TOTAL'
};

Define your waiters:

const addWaiter = (number) => {
    return {
        menuItem: menu.ADD_TO_TOTAL,
        number: number
    }
};

const subtractWaiter = (number) => {
    return {
        menuItem: menu.SUBTRACT_FROM_TOTAL,
        number: number
    }
};

Set up a clean bill:

const cleanBill = {total: 0};

Write out your cook:

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!

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.

const ticket = addWaiter(3);

Tell the chef to make that ticket into a meal:

restaurant.prepare(ticket);

Get your data onto the table where you can eat/use it:

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!:

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!

const dinersClubMembership = restaurant.frequent(callbackFunction);

Then, when your component's ready to leave:

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!