StateReducerToggle.js

export default class Toggle extends Component {
    static TOGGLE = 'TOGGLE';

    state = { on: false }

    onClick = (e) => {
        e.preventDefault();

        this.internalSetState(state => ({
            on: !state.on,
            type: this.constructor.TOGGLE,
        }));
    }

    internalSetState(changes, callback) {
        this.setState(state => {
            const stateToSet = [changes]
                // handle function setState call
                .map(c => (typeof c === 'function' ? c(state) : c))
                // apply state reducer
                .map(c => this.props.stateReducer ? this.props.stateReducer(state, c) : c)
                // remove the type so it's not set into state
                .map(({ type: ignoredType, ...c }) => c)[0];
            return stateToSet;
        }, callback);
    }

    render() {
        return this.props.children({
            ...this.state,
            onToggle: this.onClick,
        });
    }
}