redux-under-pure.jsx

/* When using a PureComponent, changes to the store will still trigger re-renders of the children
 * 
 * Tested with https://jsfiddle.net/poqf128w/4/
 *
 * https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js
 * https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js
 * https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js
 * https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js
 */
const names = [
	'World',
  'Christy',
  'Michael',
  'Simon',
  'Coreen',
  'Brian',
  'Mary',
  'Nicholas',
  'Theresa',
];

const Child = ({name}) => <span>Hello {name}</span>;
const WrappedChild = ReactRedux.connect(
  state => ({
    name: state.name
  }), {}
)(Child)

const Button = ({updateName}) => (
  <button type="button" onClick={() => updateName()} style={{display: "block"}}>
    Update!
  </button>
)
const WrappedButton = ReactRedux.connect(
  state => ({}), {
  	updateName: () => ({type: "n"})
  }
)(Button);

class Parent extends React.PureComponent {
  render() {
    return (
    	<div>
        <h1>This app is called: {this.props.appName}</h1>
        <WrappedChild/>
        <WrappedButton/>
      </div>
    );
  }
};

function reducer(state={name: "World"}, action) {
	if (action.type === "n") {
  	const ix = names.indexOf(state.name);
  	return {name: names[(ix + 1) % names.length]};
  }
  return state;
}

const store = Redux.createStore(reducer);

ReactDOM.render(
	<ReactRedux.Provider store={store}>
  	<Parent appName="Test"></Parent>
  </ReactRedux.Provider>
  ,
  document.getElementById('container')
);