react-redux-polymorphic v1.0.4

Example

reducer.js

const initState = {
  counter : 0
};

export default function (state = initState, action) {

  switch (action.type) {
    case 'ADD':
      return { ...state, counter : state.counter + 1 };
    default:
      return state;
  }
}

polymorphic.js

import reduxPolymorphic from 'react-redux-polymorphic';


/**
 * param:
 * custom func param shouldComponentUpdate:
 * reduxPolymorphic((obj, nextProps, nextState) => obj.props !== nextProps);
 *
 * OR
 *
 * default func:
 * reduxPolymorphic() === reduxPolymorphic(() => true);
 * */
const polymorphic = reduxPolymorphic();

export default polymorphic;

CounterPolymorphic.js

import polymorphic from './polymorphic';

const mapStateToProps = (state) => {
  return {
    counter: state.counter.counter,
  };
};

export default polymorphic(mapStateToProps);

app.js

import React, { Component, PropTypes } from 'react';
import CounterPolymorphic from './CounterPolymorphic';

const Counter = (props) => (
  <div>
      default component counter: {props.counter}
  </div>
);

const CustomCounter = (props) => (
  <div style={props.style}>
    custom component counter: {props.counter}
  </div>
);

export default class App extends Component {

  static contextTypes = {
    store : PropTypes.object,
  };

  add() {
    this.context.store.dispatch({type : 'ADD'});
  }

  render() {
    return (
      <div>
        <CounterPolymorphic component={Counter}/>
        <CounterPolymorphic component={<CustomCounter style={{color : 'red'}} />}/>
        <button type="button" onClick={::this.add}>Click</button>
      </div>
    );
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { combineReducers, createStore, applyMiddleware } from 'redux';
import thunkMiddleware from "redux-thunk";
import { Provider } from 'react-redux';

import counter from './reducer';
import App from './App';

const store = createStore(combineReducers({
  counter,
}), {}, applyMiddleware(thunkMiddleware));

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>, document.getElementById('app'));

###Result