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/container.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import { updateNameField, createUser } from "./actions";
+import { connect } from "react-redux";
+
+class UserCreator extends Component {
+  updateNameField = event => {
+    this.props.updateNameField(event.target.value);
+  };
+  createUser = event => {
+    event.preventDefault();
+    this.props.createUser();
+  };
+
+  render() {
+    const { name } = this.props;
+    return (
+      <form onSubmit={this.createUser}>
+        <h3>User creator</h3>
+        <input type="text" value={name} placeholder="name" onChange={this.updateNameField} />
+        <button>Save</button>
+      </form>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  name: state.name,
+  createdUser: state.createdUser
+});
+
+const mapDispatchToProps = {
+  updateNameField: updateNameField,
+  createUser: createUser
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserCreator);

src/UserCreator/index.js

@@ -1,31 +1,12 @@
-import React, { Component } from "react";
-import { updateNameField, createUser } from "./actions";
-import { connect } from "react-redux";
+import reducer from "./reducer";
+import isolate from "../utils/Isolate";
+import UserCreatorContainer from "./container";
+import { CREATE_USER } from "./actions";
 
-class UserCreator extends Component {
-  updateNameField = event => {
-    this.props.updateNameField(event.target.value);
+function mapActionsToProps(props) {
+  return {
+    [CREATE_USER]: (state, action) => props.onUserCreated({ name: state.name })
   };
-  createUser = event => {
-    event.preventDefault();
-    this.props.createUser();
-  };
-  render() {
-    const { name } = this.props;
-    return (
-      <form onSubmit={this.createUser}>
-        <h3>User creator</h3>
-        <input type="text" value={name} placeholder="name" onChange={this.updateNameField} />
-        <button>Save</button>
-      </form>
-    );
-  }
 }
 
-const mapStateToProps = state => ({ name: state.name });
-const mapDispatchToProps = {
-  updateNameField: updateNameField,
-  createUser: createUser
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(UserCreator);
+export default isolate(reducer, mapActionsToProps)(UserCreatorContainer);

src/UserCreator/reducer.js

@@ -1,4 +1,4 @@
-import { UPDATE_NAME_FIELD } from "./actions";
+import { UPDATE_NAME_FIELD, CREATE_USER } from "./actions";
 
 const initialState = {
   name: ""
@@ -8,6 +8,8 @@ export default function(state = initialState, action) {
   switch (action.type) {
     case UPDATE_NAME_FIELD:
       return { ...state, name: action.payload };
+    case CREATE_USER:
+      return state;
     default:
       return state;
   }

src/utils/Isolate.js

@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+import { Provider } from "react-redux";
+import { createStore, compose, applyMiddleware } from "redux";
+
+export default function isolate(reducer, mapActionToProps) {
+  return WrappedComponent => {
+    return class Widget extends Component {
+      constructor(props) {
+        super(props);
+        this.displayName = props.id;
+
+        const composeEnhancers =
+          typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+            ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+                name: this.displayName
+              })
+            : compose;
+
+        this.store = createStore(
+          reducer,
+          composeEnhancers(
+            applyMiddleware(store => next => action => {
+              const result = next(action);
+              const state = store.getState();
+
+              const mappings = mapActionToProps(this.props);
+
+              if (mappings[action.type]) {
+                mappings[action.type](state, action);
+              }
+
+              return result;
+            })
+          )
+        );
+      }
+      render() {
+        return (
+          <Provider store={this.store}>
+            <WrappedComponent {...this.props} />
+          </Provider>
+        );
+      }
+    };
+  };
+}