implement isolation of UserCreator widget with nested stores

src/App.js

@@ -2,14 +2,16 @@ import React, { Component } from "react";
 import UserCreator from "./UserCreator";
 import { connect } from "react-redux";
 
+import { userCreated } from "./state/users";
+
 class App extends Component {
   render() {
-    const { users } = this.props;
+    const { users, createUser } = this.props;
     return (
       <div>
-        <UserCreator />
-        <UserCreator />
-        <UserCreator />
+        <UserCreator onUserCreated={createUser} id="userCreator1" />
+        <UserCreator onUserCreated={createUser} id="userCreator2" />
+        <UserCreator onUserCreated={createUser} id="userCreator3" />
         <div id="userList">
           {users.map(({ name }) =>
             <div key={name} className="user">
@@ -28,4 +30,8 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps)(App);
+const mapDispatchToProps = {
+  createUser: userCreated
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/UserCreator/index.js

@@ -1,6 +1,30 @@
 import React, { Component } from "react";
 import { updateNameField, createUser } from "./actions";
-import { connect } from "react-redux";
+import reducer from "./reducer";
+
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+
+function isolate(WrappedComponent) {
+  return class Widget extends Component {
+    constructor(props) {
+      super(props);
+      this.displayName = props.id;
+      this.store = createStore(
+        reducer,
+        window.__REDUX_DEVTOOLS_EXTENSION__ &&
+          window.__REDUX_DEVTOOLS_EXTENSION__({ name: props.id })
+      );
+    }
+    render() {
+      return (
+        <Provider store={this.store}>
+          <WrappedComponent {...this.props} />
+        </Provider>
+      );
+    }
+  };
+}
 
 class UserCreator extends Component {
   updateNameField = event => {
@@ -10,6 +34,14 @@ class UserCreator extends Component {
     event.preventDefault();
     this.props.createUser();
   };
+
+  componentWillReceiveProps(nextProps) {
+    const { createdUser } = nextProps;
+    if (createdUser && !this.props.createdUser) {
+      this.props.onUserCreated(createdUser);
+    }
+  }
+
   render() {
     const { name } = this.props;
     return (
@@ -22,10 +54,14 @@ class UserCreator extends Component {
   }
 }
 
-const mapStateToProps = state => ({ name: state.name });
+const mapStateToProps = state => ({
+  name: state.name,
+  createdUser: state.createdUser
+});
+
 const mapDispatchToProps = {
   updateNameField: updateNameField,
   createUser: createUser
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserCreator);
+export default isolate(connect(mapStateToProps, mapDispatchToProps)(UserCreator));

src/UserCreator/reducer.js

@@ -1,13 +1,17 @@
-import { UPDATE_NAME_FIELD } from "./actions";
+import { UPDATE_NAME_FIELD, CREATE_USER } from "./actions";
 
 const initialState = {
-  name: ""
+  name: "",
+  // Only way of getting the information back to the component..
+  createdUser: null
 };
 
 export default function(state = initialState, action) {
   switch (action.type) {
     case UPDATE_NAME_FIELD:
       return { ...state, name: action.payload };
+    case CREATE_USER:
+      return { ...state, createdUser: { name: state.name } };
     default:
       return state;
   }