Skip to content

Instantly share code, notes, and snippets.

@javarouka
Created July 23, 2017 14:42
Show Gist options
  • Save javarouka/2f68ea71a28296476b3650c5c48e8e78 to your computer and use it in GitHub Desktop.
Save javarouka/2f68ea71a28296476b3650c5c48e8e78 to your computer and use it in GitHub Desktop.
/*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} />
}
};
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment