react.js

import { createContext, createElement, Children, useContext, useState, useEffect } from 'react';
import { assign, mapActions, select } from '../util';

const Context = createContext();

/** Wire a component up to the store. Passes state as props, re-renders on change.
 *  @param {Function|Array|String} mapStateToProps  A function mapping of store state to prop values, or an array/CSV of properties to map.
 *  @param {Function|Object} [actions] 				Action functions (pure state mappings), or a factory returning them. Every action function gets current state as the first parameter and any other params next
 *  @returns {Component} ConnectedComponent
 *  @example
 *    const Foo = connect('foo,bar')( ({ foo, bar }) => <div /> )
 *  @example
 *    const actions = { someAction }
 *    const Foo = connect('foo,bar', actions)( ({ foo, bar, someAction }) => <div /> )
 *  @example
 *    @connect( state => ({ foo: state.foo, bar: state.bar }) )
 *    export class Foo { render({ foo, bar }) { } }
 */

export function connect(mapStateToProps, actions) {
	if (typeof mapStateToProps!=='function') {
		mapStateToProps = select(mapStateToProps || []);
	}
	let boundActions;
	return Child => function Wrapper (props) {
		const store = useContext(Context);
		let [state = mapStateToProps(store ? store.getState() : {}, props), setState] = useState();
		boundActions = boundActions || actions ? mapActions(actions, store) : { store };

		useEffect(() => {
			let update = () => {
				let mapped = mapStateToProps(store ? store.getState() : {}, props);
				for (let i in mapped) if (mapped[i]!==state[i]) {
					state = mapped;
					return setState(state);
				}
				for (let i in state) if (!(i in mapped)) {
					state = mapped;
					return setState(state);
				}
			};

			return store.subscribe(update);
		}, []);

		return createElement(Child, assign(assign(assign({}, boundActions), props), state));
	};
}


/** Provider exposes a store (passed as `props.store`) into context.
 *
 *  Generally, an entire application is wrapped in a single `<Provider>` at the root.
 *  @class
 *  @extends Component
 *  @param {Object} props
 *  @param {Store} props.store		A {Store} instance to expose via context.
 */
export function Provider (props) {
	return createElement(Context.Provider, { value: props.store }, Children.only(props.children));
}