react-updater-component

Inspired by redux, a helper to create components whose state is managed by a built-in reducer. No more this.setState. In fact, no more this. All component state is stored in the state structure, which is managed by reduce (see reducer documentation).

Examples:

A simple component that manages it's own state.

1import {createComponent} from '@download/react-updater-component';
2
3const Counter = createComponent({
4	render({props, state, update}) {
5		return <div>
6			<button onClick={() => update('INCREMENT', 1)}>+1</button>
7			<button onClick={() => update('INCREMENT', 5)}>+5</button>
8			<span>Current Count: {state.count}</span>
9		</div>;
10	},
11	reduce(state = {count: 0}, {type, payload}) {
12		if(type === 'INCREMENT') {
13			return {
14				...state,
15				count: state.count + payload
16			};
17		}
18		return state;
19	}
20});
21
22ReactDOM.render(<Counter />, document.getElementById('root'));

A component that needs to get lifecycle notifications.

1const clockInitialState = {
2	interval: null,
3	time: 0
4};
5const Clock = createComponent({
6	// Called after the component has mounted
7	onMount({update}) {
8		const interval = setInterval(refresh, 1000);
9		refresh();
10		update('SAVE_INTERVAL', interval);
11
12		function refresh() {
13			update('SET_TIME', Date.now());
14		}
15	},
16	render({state}) {
17		const timeStr = new Date(state.time).toLocaleTimeString();
18		return <div>{timeStr}</div>;
19	},
20	/*
21	You can declare an initial state in your reducer. If you are
22	not using es6 default parameters then your reducer should return
23	the initial state whenever it receives `undefined` for `state`;
24	*/
25	reduce(state = clockInitialState, {type, payload}) {
26		switch(type) {
27			case 'SAVE_INTERVAL':
28				return {
29					...state,
30					interval: payload
31				};
32			case 'SET_TIME':
33				return {
34					...state,
35					time: payload
36				};
37			default:
38				return state;
39		}
40	},
41	// Called before the component unmounts
42	onUnmount({state}) {
43		clearTimeout(state.interval);
44	}
45});

There is also an onPropsChange notifier that works exactly like onMount and onUnmount.

If you need further documentation just read the source code. It's shorter than this README.