Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*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} />
- }
- };
- }
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement