use redux-loop for side-effects

package.json

@@ -40,7 +40,9 @@
     "react-redux-subspace": "^2.0.3-alpha",
     "react-test-renderer": "^15.6.1",
     "redux": "^3.7.2",
+    "redux-loop": "^3.1.2",
     "redux-subspace": "^2.0.3-alpha",
+    "redux-subspace-loop": "^2.0.4-alpha",
     "redux-thunk": "^2.2.0",
     "style-loader": "0.18.2",
     "sw-precache-webpack-plugin": "0.11.3",

src/App.js

@@ -6,6 +6,7 @@ import { SubspaceProvider } from "react-redux-subspace";
 class App extends Component {
   render() {
     const { users } = this.props;
+
     return (
       <div>
         <SubspaceProvider mapState={state => state.app.userCreator1} namespace="userCreator1">

src/App.test.js

@@ -13,6 +13,10 @@ function createApp() {
   );
 }
 
+function resolveAllPromises() {
+  return new Promise(resolve => setImmediate(resolve));
+}
+
 function getUserList(app) {
   return app.find("#userList");
 }
@@ -38,11 +42,13 @@ describe("App", () => {
 });
 
 describe("User creator", () => {
-  it("adds new user to user store when submitted", () => {
+  it("adds new user to user store when submitted", async () => {
     const app = createApp();
     createUser(app.find(UserCreator).first());
+    await resolveAllPromises();
     expect(getUserList(app).find(".user").length).toBe(1);
   });
+
   it("doesn't change other UserCreators' name field value", () => {
     const app = createApp();
     inputNameValue(app.find(UserCreator).first(), "Jorma");

src/UserCreator/actions.js

@@ -1,5 +1,3 @@
-import { globalAction } from "redux-subspace";
-import { userCreated } from "../state/users";
 export const UPDATE_NAME_FIELD = "USER_CREATOR/UPDATE_NAME_FIELD";
 export function updateNameField(name) {
   return {
@@ -8,9 +6,17 @@ export function updateNameField(name) {
   };
 }
 
+export const CREATE_USER = "USER_CREATOR/CREATE_USER";
+
 export function createUser() {
-  return (dispatch, getState, a, b) => {
-    const user = getState();
-    dispatch(globalAction(userCreated(user)));
-  };
+  return { type: CREATE_USER };
+}
+
+export const USER_SAVED = "USER_CREATOR/USER_SAVED";
+export function userSaved(user) {
+  return { type: USER_SAVED, payload: user };
+}
+
+export function saveUser(user) {
+  return Promise.resolve(user);
 }

src/UserCreator/reducer.js

@@ -1,4 +1,9 @@
-import { UPDATE_NAME_FIELD } from "./actions";
+import { loop, Cmd } from "redux-loop";
+
+import { CREATE_USER, UPDATE_NAME_FIELD, USER_SAVED, saveUser, userSaved } from "./actions";
+import { globalAction } from "redux-subspace";
+
+import { userCreated } from "../state/users";
 
 const initialState = {
   name: ""
@@ -8,6 +13,19 @@ export default function(state = initialState, action) {
   switch (action.type) {
     case UPDATE_NAME_FIELD:
       return { ...state, name: action.payload };
+
+    case USER_SAVED:
+      return loop(state, Cmd.action(globalAction(userCreated(action.payload))));
+
+    case CREATE_USER:
+      return loop(
+        state,
+        Cmd.run(saveUser, {
+          successActionCreator: userSaved,
+          args: [state]
+        })
+      );
+
     default:
       return state;
   }

src/state/app.js

@@ -1,6 +1,6 @@
-import { combineReducers } from "redux";
-import { namespaced } from "redux-subspace";
+import { namespaced } from "redux-subspace-loop";
 import userCreatorReducer from "../UserCreator/reducer";
+import { combineReducers } from "redux-loop";
 
 export default combineReducers({
   userCreator1: namespaced("userCreator1")(userCreatorReducer),

src/store.js

@@ -1,10 +1,9 @@
-import { compose, combineReducers, createStore } from "redux";
-import { applyMiddleware } from "redux-subspace";
+import { compose, createStore } from "redux";
 import appReducer from "./state/app";
 import usersReducer from "./state/users";
-import thunk from "redux-thunk";
+import { combineReducers, install } from "redux-loop";
 
-const enhancers = [applyMiddleware(thunk)];
+const enhancers = [install()];
 
 if (window.__REDUX_DEVTOOLS_EXTENSION__) {
   enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__());

yarn.lock

@@ -5266,10 +5266,24 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-loop@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/redux-loop/-/redux-loop-3.1.2.tgz#5abbae1bb96ecaff1a51dcbb8b8978c6166b1522"
+
+redux-subspace-loop@^2.0.4-alpha:
+  version "2.0.4-alpha"
+  resolved "https://registry.yarnpkg.com/redux-subspace-loop/-/redux-subspace-loop-2.0.4-alpha.tgz#d0c1172ad010aa670ece9a2e6bd9e1b28eea7abc"
+  dependencies:
+    redux-subspace "^2.0.4-alpha"
+
 redux-subspace@^2.0.3-alpha:
   version "2.0.3-alpha"
   resolved "https://registry.yarnpkg.com/redux-subspace/-/redux-subspace-2.0.3-alpha.tgz#c785e931224e122fe3ce4f744c79f7c9ed43a54f"
 
+redux-subspace@^2.0.4-alpha:
+  version "2.0.4-alpha"
+  resolved "https://registry.yarnpkg.com/redux-subspace/-/redux-subspace-2.0.4-alpha.tgz#31b8b380e6d39879b12b666ac9956a5e72151671"
+
 redux-thunk@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"