tabConnector.js

/*eslint no-console:0 */
import React from 'react';

const DEFAULT_STYLE = 'font-weight:bold; color:';
const PREV_STATE_STYLE = `${DEFAULT_STYLE}gray`;
const ACTION_STYLE = `${DEFAULT_STYLE}blue`;
const NEXT_STATE_STYLE = `${DEFAULT_STYLE}green`;

const showLog = (message, params, styles) => console.log(`%c${message}`, styles, params);

const defaultSelector = state => state;
const defaultDispatcher = null;
const defaultReducer = defaultSelector;

export const TAB_ACTION_SYM_MARK = '$$TabAction';

export default (selector = defaultSelector, dispatcher = defaultDispatcher, reducer = defaultReducer) => {

    return Container => {

        return class TabConnected extends React.Component {

            constructor(props) {
                super(props);
                this.state = reducer();
            }

            simulateReducer = (action) => {

                const prevState = this.state;
                showLog('prev state', prevState, PREV_STATE_STYLE);
                showLog('action', action, ACTION_STYLE);
                const nextState = reducer(prevState, action);
                showLog('next state', nextState, NEXT_STATE_STYLE);
                this.setState(nextState);
            };

            render() {

                const { store, context: { url } } = this.props;

                const dispatchToProps = dispatcher(action => {

                    if(!action[Symbol.for(TAB_ACTION_SYM_MARK)]) {
                        store.dispatch(action);
                        return;
                    }

                    console.groupCollapsed(`action from tab @ ${action.type}`, url);
                    this.simulateReducer(action);
                    console.groupEnd();
                });

                const selectedProps = selector(this.props.store.getState());
                return <Container {...selectedProps} {...this.state} {...dispatchToProps} />
            }

        };
    }
};