WIP Pass extra argument to actions

README.md

@@ -191,6 +191,7 @@ Creates a new store, which is a tiny evented state container.
 **Parameters**
 
 - `state` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Optional initial state (optional, default `{}`)
+- `extraArg`  
 
 **Examples**
 
@@ -207,7 +208,7 @@ Returns **[store](#store)**
 
 An observable state container, returned from [createStore](#createstore)
 
-##### action
+##### dispatch
 
 Create a bound copy of the given action function.
 The bound returned function invokes action() and persists the result back to the store.

devtools.d.ts

@@ -1,3 +1,3 @@
 import { Store } from "unistore";
 
-export default function unistoreDevTools<K>(store: Store<K>): Store<K>;
+export default function unistoreDevTools<K, E>(store: Store<K, E>): Store<K, E>;

devtools.js

@@ -18,11 +18,16 @@ module.exports = function unistoreDevTools(store) {
 			}
 		});
 		store.devtools.init(store.getState());
-		store.subscribe(function (state, action) {
-			var actionName = action && action.name || 'setState';
+		store.subscribe(function (state, action, update) {
+			update = update || {};
+			var actionName = action
+				? action.type ||
+				  action.name ||
+				  'N/A (' + (Object.keys(update).join(', ') || 'none') + ')'
+				: 'setState (' + (Object.keys(update).join(', ') || 'none') + ')';
 
 			if (!ignoreState) {
-				store.devtools.send(actionName, state);
+				store.devtools.send({ type: actionName, update: update }, state);
 			} else {
 				ignoreState = false;
 			}

index.d.ts

@@ -3,27 +3,46 @@
 // K - Store state
 // I - Injected props to wrapped component
 
-export type Listener<K> = (state: K, action?: Action<K>) => void;
+export type Listener<K, E> = (state: K, action?: Action<K, E>, update?: Partial<K>) => void;
 export type Unsubscribe = () => void;
-export type Action<K> = (state: K, ...args: any[]) => void;
-export type BoundAction = (...args: any[]) => void;
-
-export interface Store<K> {
-	action(action: Action<K>): BoundAction;
-	setState<U extends keyof K>(update: Pick<K, U>, overwrite?: boolean, action?: Action<K>): void;
-	subscribe(f: Listener<K>): Unsubscribe;
-	unsubscribe(f: Listener<K>): void;
-	getState(): K;
+
+export type AsyncActionFn<K, E> = (getState: () => K, action: (action: Action<K, E>) => Promise<void> | void, extraArg: E) => Promise<Partial<K> | void>;
+export type SyncActionFn<K, E> = (getState: () => K, action: (action: Action<K, E>, E) => Promise<void> | void, extraArg: E) => Partial<K> | void;
+export type ActionFn<K, E> = AsyncActionFn<K, E> | SyncActionFn<K, E>;
+
+export type AsyncActionObject<K, E> = {
+  type: string;
+  action: AsyncActionFn<K, E>;
+}
+export type SyncActionObject<K, E> = {
+  type: string;
+  action: SyncActionFn<K, E>;
+}
+export type ActionObject<K, E> = AsyncActionObject<K, E> | SyncActionObject<K, E>;
+
+export type Action<K, E> = ActionObject<K, E> | ActionFn<K, E>;
+
+export type AsyncActionCreator<K, E> = (...args: any[]) => AsyncActionFn<K, E> | AsyncActionObject<K, E>;
+export type SyncActionCreator<K, E> = (...args: any[]) => SyncActionFn<K, E> | SyncActionObject<K, E>;
+export type ActionCreator<K, E> = AsyncActionCreator<K, E> | SyncActionCreator<K, E>;
+
+export type ActionCreatorsObject<K, E> = {
+  [actionCreator: string]: ActionCreator<K, E>
 }
 
-export default function createStore<K>(state?: K): Store<K>;
+export type MappedActionCreators<A> = {
+  [P in keyof A]: A[P] extends AsyncActionCreator<any, any> ? (...args: any[]) => Promise<void> : (...args: any[]) => void
+}
 
-export type ActionFn<K> = (state: K, ...args: any[]) => Promise<Partial<K>> | Partial<K> | void;
 
-export interface ActionMap<K> {
-	[actionName: string]: ActionFn<K>;
+export interface Store<K, E> {
+	dispatch(action: Action<K, E>): Promise<void> | void;
+	setState<U extends keyof K>(update: Pick<K, U>, overwrite?: boolean, action?: Action<K, E>): void;
+	subscribe(f: Listener<K, E>): Unsubscribe;
+	unsubscribe(f: Listener<K, E>): void;
+	getState(): K;
 }
 
-export type ActionCreator<K> = (store: Store<K>) => ActionMap<K>;
+export default function createStore<K, E>(state?: K, extraArg?: E): Store<K, E>;
 
 export type StateMapper<T, K, I> = (state: K, props: T) => I;

package.json

@@ -22,7 +22,8 @@
   "eslintConfig": {
     "extends": "eslint-config-developit",
     "rules": {
-      "prefer-rest-params": 0
+      "prefer-rest-params": 0,
+      "prefer-spread": 0
     }
   },
   "bundlesize": [

preact.d.ts

@@ -5,20 +5,20 @@
 
 declare module 'unistore/preact' {
 	import * as Preact from 'preact';
-	import { ActionCreator, StateMapper, Store } from 'unistore';
+	import { StateMapper, Store, ActionCreatorsObject, MappedActionCreators  } from 'unistore';
 
-	export function connect<T, S, K, I>(
-		mapStateToProps: string | Array<string> | StateMapper<T, K, I>,
-		actions?: ActionCreator<K> | object
+	export function connect<T, S, K, I, A extends ActionCreatorsObject<K, E>, E = any>(
+		mapStateToProps: string | Array<string> | StateMapper<T, K, I> | null,
+		actions?: A,
 	): (
-		Child: Preact.ComponentConstructor<T & I, S> | Preact.AnyComponent<T & I, S>
+		Child: Preact.ComponentConstructor<T & I & MappedActionCreators<A>, S> | Preact.AnyComponent<T & I & MappedActionCreators<A>, S>
 	) => Preact.ComponentConstructor<T | T & I, S>;
 
-	export interface ProviderProps<T> {
-		store: Store<T>;
+	export interface ProviderProps<K, E = any> {
+		store: Store<K, E>;
 	}
 
-	export class Provider<T> extends Preact.Component<ProviderProps<T>> {
-		render(props: ProviderProps<T>): Preact.JSX.Element;
+	export class Provider<K> extends Preact.Component<ProviderProps<K>> {
+		render(props: ProviderProps<K>): Preact.JSX.Element;
 	}
 }

react.d.ts

@@ -2,23 +2,24 @@
 // S - Wrapped component state
 // K - Store state
 // I - Injected props to wrapped component
+// A - actions
 
 declare module 'unistore/react' {
 	import * as React from 'react';
-	import { ActionCreator, StateMapper, Store } from 'unistore';
+	import { StateMapper, Store, ActionCreatorsObject, MappedActionCreators  } from 'unistore';
 
-	export function connect<T, S, K, I>(
-		mapStateToProps: string | Array<string> | StateMapper<T, K, I>,
-		actions?: ActionCreator<K> | object
+	export function connect<T, S, K, I, A extends ActionCreatorsObject<K, E>, E = any>(
+		mapStateToProps: string | Array<string> | StateMapper<T, K, I> | null,
+		actions?: A,
 	): (
-		Child: ((props: T & I) => React.ReactNode) | React.ComponentClass<T & I, S> | React.FC<T & I>
+		Child: ((props: T & I & MappedActionCreators<A>) => React.ReactNode) | React.ComponentClass<T & I & MappedActionCreators<A>, S> | React.FC<T & I & MappedActionCreators<A>>
 	) => React.ComponentClass<T | T & I, S> | React.FC<T | T & I>;
 
-	export interface ProviderProps<T> {
-		store: Store<T>;
+	export interface ProviderProps<K, E = any> {
+		store: Store<K, E>;
 	}
 
-	export class Provider<T> extends React.Component<ProviderProps<T>, {}> {
+	export class Provider<K> extends React.Component<ProviderProps<K>, {}> {
 		render(): React.ReactNode;
 	}
 

src/index.js

@@ -11,7 +11,7 @@ import { assign } from './util';
  * store.setState({ a: 'b' });   // logs { a: 'b' }
  * store.setState({ c: 'd' });   // logs { a: 'b', c: 'd' }
  */
-export default function createStore(state) {
+export default function createStore(state, extraArg) {
 	let listeners = [];
 	state = state || {};
 
@@ -28,10 +28,25 @@ export default function createStore(state) {
 		listeners = out;
 	}
 
+	function dispatch(action) {
+		function apply(result) {
+			setState(result, false, action);
+		}
+		let ret = (action.action || action)(getState, dispatch, extraArg);
+		if (ret != null) {
+			if (ret.then) return ret.then(apply);
+			return apply(ret);
+		}
+	}
+
+	function getState() {
+		return state;
+	}
+
 	function setState(update, overwrite, action) {
 		state = overwrite ? update : assign(assign({}, state), update);
 		let currentListeners = listeners;
-		for (let i=0; i<currentListeners.length; i++) currentListeners[i](state, action);
+		for (let i=0; i<currentListeners.length; i++) currentListeners[i](state, action, update);
 	}
 
 	/**
@@ -48,22 +63,7 @@ export default function createStore(state) {
 		 * @param {Function} action	An action of the form `action(state, ...args) -> stateUpdate`
 		 * @returns {Function} boundAction()
 		 */
-		action(action) {
-			function apply(result) {
-				setState(result, false, action);
-			}
-
-			// Note: perf tests verifying this implementation: https://esbench.com/bench/5a295e6299634800a0349500
-			return function() {
-				let args = [state];
-				for (let i=0; i<arguments.length; i++) args.push(arguments[i]);
-				let ret = action.apply(this, args);
-				if (ret!=null) {
-					if (ret.then) return ret.then(apply);
-					return apply(ret);
-				}
-			};
-		},
+		dispatch,
 
 		/**
 		 * Apply a partial state object to the current state, invoking registered listeners.
@@ -93,8 +93,6 @@ export default function createStore(state) {
 		 * Retrieve the current state object.
 		 * @returns {Object} state
 		 */
-		getState() {
-			return state;
-		}
+		getState
 	};
 }

src/util.js

@@ -1,9 +1,10 @@
 // Bind an object/factory of actions to the store and wrap them.
 export function mapActions(actions, store) {
-	if (typeof actions==='function') actions = actions(store);
 	let mapped = {};
 	for (let i in actions) {
-		mapped[i] = store.action(actions[i]);
+		mapped[i] = function () {
+			return store.dispatch(actions[i].apply(actions, arguments));
+		};
 	}
 	return mapped;
 }

test/preact/builds.test.js

@@ -27,16 +27,16 @@ describe('build: default', () => {
 	describe('smoke test (preact)', () => {
 		it('should render', done => {
 			const { Provider, connect } = preact;
-			const actions = ({ getState, setState }) => ({
-				incrementTwice(state) {
-					setState({ count: state.count + 1 });
+			const actions = {
+				incrementTwice: () => (getState, dispatch) => {
+					dispatch(() => ({ count: getState().count + 1 }));
 					return new Promise(r =>
 						setTimeout(() => {
 							r({ count: getState().count + 1 });
 						}, 20)
 					);
 				}
-			});
+			};
 			const App = connect('count', actions)(({ count, incrementTwice }) => (
 				<button onClick={incrementTwice}>count: {count}</button>
 			));

test/react/builds.test.js

@@ -33,16 +33,16 @@ describe('build: default', () => {
 	describe('smoke test (react)', () => {
 		it('should render', done => {
 			const { Provider, connect } = react;
-			const actions = ({ getState, setState }) => ({
-				incrementTwice(state) {
-					setState({ count: state.count + 1 });
+			const actions = {
+				incrementTwice: () => (getState, dispatch) => {
+          dispatch(() => ({ count: getState().count + 1 }))
 					return new Promise(r =>
 						setTimeout(() => {
 							r({ count: getState().count + 1 });
 						}, 20)
 					);
 				}
-			});
+			};
 			const App = connect('count', actions)(({ count, incrementTwice }) => (
 				<button id="some_button" onClick={incrementTwice}>
 					count: {count}

test/unistore.test.js

@@ -36,15 +36,17 @@ describe('createStore()', () => {
 		let rval = store.subscribe(sub1);
 		expect(rval).toBeInstanceOf(Function);
 
-		store.setState({ a: 'b' });
-		expect(sub1).toBeCalledWith(store.getState(), action);
+		let update1 = { a: 'b' };
+		store.setState(update1);
+		expect(sub1).toBeCalledWith(store.getState(), action, update1);
 
 		store.subscribe(sub2);
-		store.setState({ c: 'd' });
+		let update2 = { c: 'd' };
+		store.setState(update2);
 
 		expect(sub1).toHaveBeenCalledTimes(2);
-		expect(sub1).toHaveBeenLastCalledWith(store.getState(), action);
-		expect(sub2).toBeCalledWith(store.getState(), action);
+		expect(sub1).toHaveBeenLastCalledWith(store.getState(), action, update2);
+		expect(sub2).toBeCalledWith(store.getState(), action, update2);
 	});
 
 	it('should unsubscribe', () => {