WIP Rethinking actions and action creation - #182

This PR rethinks actions and action creators. An action now simply becomes an
unbound function with two arguments, state and store (or only store, see
discussion below). More commonly a user will use action creators, which are
functions that return an action (function).

// without argument
export const increment = () => (state, store) => ({
 count: state.count + 1,
})
// with argument
export const increment = (amount) => (state, store) => ({
 count: state.count + amount,
})

I'm beginning to question whether the state argument is really needed. Calling
getState() isn't that much extra work, and to avoid stale states it is
often required. The above example would then be:

export const increment = (amount) => ({ getState }) => ({
 count: getState().count + amount,
})

I've also updated devtools to differentiate between unnamed actions and direct
calls to setState. Furthermore, the update argument passed to setState is now passed on to the subscribers. This was done to show the update object in devtools.

Caveats

The only problem with this change is we no longer get naming of actions in
devtools for free. Now you have to name both the action creator and the action
function if you want to get a descriptive name for the action in devtools.
I've also implemented the ability to return an action object instead
of an action function, merely for naming purposes.

export const increment = (amount) => function increment (state) {
 return { count: state.count + amount },
}
// OR
export const increment = (amount) => (state) => ({
 type: `increment by ${amount}`,
 action: (state) => ({ count: state.count + amount }),
});

Why?

1. Easier to compose action maps for connected components

Before:

import someActions from './someActions'
import moreActions from './moreActions'
connect('stuffs', store => ({
 ...someActions(store),
 ...moreActions(store),
}))(Component)
// or even worse, if we dont want to expose all actions:
connect('stuffs', store => {
 const { oneAction, twoAction } = someActions(store)
 const { anotherAction } = moreActions(store)
 return {
 oneAction,
 twoAction,
 anotherAction,
 }
})(Component)

Now:

import * as someActions from './someActions'
import * as moreActions from './moreActions'
connect('stuffs', {
 ...someActions,
 ...moreActions,
})(Component)
// or even better:
import { oneAction, twoAction } from './someActions'
import { anotherAction } from './moreActions'
connect('stuffs', {
 oneAction,
 twoAction,
 anotherAction,
})(Component)

2. Easier to call actions from other actions:

Before:

import otherActions from './otherActions'
export default (store) => ({
 anAction() {
 store.action(otherActions(store).anotherAction)()
 
 return {
 stuffs: ['interesting stuff'],
 }
 }
})

Now:

import { anotherAction } from './otherActions'
export const anAction = () => (state, { action }) => {
 action(anotherAction())
 return {
 stuffs: ['interesting stuff'],
 }
}

3. A little easier to test

Since actions no longer need to be bound it becomes a little easier to test.

Performance

I was initially worried creating new action functions every time an action is called would have negative performance impacts, but I was glad to see that the performance actually greatly improved. At least in modern browsers. The results in the table below are from https://jsperf.com/binding-vs-action-creators.

Build Size

The full preact and dist builds have shrunk quite a bit, while somehow the isolated preact build increased. File compression is a dark magic.

Notes

I had to disable the prefer-spread eslint rule to allow the modifications of
mapAction where .apply(actions, arguments) is used.