Removing thunk incrementally, pt. 1. Addresses #550

Author: davidkpiano

src/actions/batch-actions.js

@@ -22,10 +22,22 @@ const batch = trackable((model, actions) => {
     };
   }
 
-  return (dispatch) => {
-    const [plainActions, actionThunks] = partition(dispatchableActions,
-      (action) => typeof action !== 'function');
+  const [plainActions, actionThunks] = partition(dispatchableActions,
+    (action) => typeof action !== 'function');
 
+  if (!actionThunks.length) {
+    if (plainActions.length > 1) {
+      return {
+        type: actionTypes.BATCH,
+        model,
+        actions: plainActions,
+      };
+    } else if (plainActions.length === 1) {
+      return plainActions[0];
+    }
+  }
+
+  return (dispatch) => {
     if (plainActions.length > 1) {
       dispatch({
         type: actionTypes.BATCH,
@@ -35,7 +47,6 @@ const batch = trackable((model, actions) => {
     } else if (plainActions.length === 1) {
       dispatch(plainActions[0]);
     }
-
     actionThunks.forEach(dispatch);
   };
 });

src/actions/field-actions.js

@@ -167,63 +167,65 @@ function createFieldActions(s = defaultStrategies) {
     submitFailed,
   });
 
-  const submit = (model, promise, options = {}) => (dispatch, getState) => {
+  const submit = (model, promise, options = {}) => {
     if (typeof promise === 'undefined') {
-      return dispatch(addIntent(model, { type: 'submit' }));
+      return addIntent(model, { type: 'submit' });
     }
 
-    if (options.validate) {
-      const form = s.getForm(getState(), model);
-
-      if (!form.$form.valid) {
-        return dispatch(NULL_ACTION);
-      }
-
-      dispatch(setPending(model, true));
-    } else if (options.validators || options.errors) {
-      const validators = options.validators || options.errors;
-      const isErrors = options.errors;
-      const value = s.get(getState(), model);
-      const validity = getValidity(validators, value);
-      const valid = options.errors
-        ? !isValidityInvalid(validity)
-        : isValidityValid(validity);
-
-      if (!valid) {
-        return dispatch(isErrors
-          ? setErrors(model, validity)
-          : setValidity(model, validity));
+    return (dispatch, getState) => {
+      if (options.validate) {
+        const form = s.getForm(getState(), model);
+
+        if (!form.$form.valid) {
+          return dispatch(NULL_ACTION);
+        }
+
+        dispatch(setPending(model, true));
+      } else if (options.validators || options.errors) {
+        const validators = options.validators || options.errors;
+        const isErrors = options.errors;
+        const value = s.get(getState(), model);
+        const validity = getValidity(validators, value);
+        const valid = options.errors
+          ? !isValidityInvalid(validity)
+          : isValidityValid(validity);
+
+        if (!valid) {
+          return dispatch(isErrors
+            ? setErrors(model, validity)
+            : setValidity(model, validity));
+        }
+
+        dispatch(batch(model, [
+          setValidity(model, isErrors
+            ? invertValidity(validity)
+            : validity),
+          setPending(model, true),
+        ]));
+      } else {
+        dispatch(setPending(model, true));
       }
 
-      dispatch(batch(model, [
-        setValidity(model, isErrors
-          ? invertValidity(validity)
-          : validity),
-        setPending(model, true),
-      ]));
-    } else {
-      dispatch(setPending(model, true));
-    }
-
-    const errorsAction = options.fields
-      ? setFieldsErrors
-      : setErrors;
-
-    promise.then(response => {
-      dispatch(batch(model, [
-        setSubmitted(model, true),
-        setValidity(model, response),
-      ]));
-    }).catch(error => {
-      if (!isNative) console.error(error);
-
-      dispatch(batch(model, [
-        setSubmitFailed(model),
-        errorsAction(model, error),
-      ]));
-    });
+      const errorsAction = options.fields
+        ? setFieldsErrors
+        : setErrors;
+
+      promise.then(response => {
+        dispatch(batch(model, [
+          setSubmitted(model, true),
+          setValidity(model, response),
+        ]));
+      }).catch(error => {
+        if (!isNative) console.error(error);
+
+        dispatch(batch(model, [
+          setSubmitFailed(model),
+          errorsAction(model, error),
+        ]));
+      });
 
-    return promise;
+      return promise;
+    };
   };
 
   const submitFields = (model, promise, options = {}) =>

src/components/control-component.js

@@ -272,6 +272,7 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
         model,
         modelValue,
         updateOn,
+        dispatch,
       } = this.props;
 
       // If there are no async validators,
@@ -295,23 +296,19 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
 
       if (!syncValid) return false;
 
-      return (dispatch) => {
-        mapValues(asyncValidators,
-          (validator, key) => dispatch(actions.asyncSetValidity(model,
-            (_, done) => {
-              const outerDone = (valid) => {
-                const validity = i.merge(fieldValue.validity, { [key]: valid });
+      dispatch(actions.setValidating(model, true));
 
-                done(validity);
-              };
+      mapValues(asyncValidators, (validator, key) => {
+        const outerDone = (valid) => {
+          const validity = i.merge(fieldValue.validity, { [key]: valid });
 
-              validator(getValue(valueToValidate), outerDone);
-            })
-          )
-        );
+          dispatch(actions.setValidity(model, validity));
+        };
 
-        return valueToValidate;
-      };
+        validator(getValue(valueToValidate), outerDone);
+      });
+
+      return valueToValidate;
     }
 
     getNodeErrors() {
@@ -489,8 +486,6 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
           eventAction && eventAction(model),
           containsEvent(validateOn, eventName)
             && this.getValidateAction(persistedEvent, eventName),
-          containsEvent(asyncValidateOn, eventName)
-            && this.getAsyncValidateAction(persistedEvent, eventName),
           containsEvent(updateOn, eventName)
             && this.getChangeAction(persistedEvent),
         ];
@@ -514,7 +509,15 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
           )(event);
         }
 
+
         return compose(
+          (e) => {
+            if (containsEvent(asyncValidateOn, eventName)) {
+              this.getAsyncValidateAction(e, eventName);
+            }
+
+            return e;
+          },
           dispatchBatchActions,
           parser,
           getValue,

test/batched-actions-spec.js

@@ -5,9 +5,8 @@ import thunk from 'redux-thunk';
 import { modelReducer, formReducer, actions, actionTypes } from '../src';
 
 describe('batched actions', () => {
-  const mockStore = configureMockStore([thunk]);
-
   it('should batch actions', (done) => {
+    const mockStore = configureMockStore([thunk]);
     const action = actions.batch('test.foo', [
       actions.change('test.foo', 'testing'),
       actions.focus('test.foo'),
@@ -48,6 +47,39 @@ describe('batched actions', () => {
     store.dispatch(action);
   });
 
+  it('should batch actions without requiring thunk', (done) => {
+    const mockStore = configureMockStore();
+    const action = actions.batch('test.foo', [
+      actions.change('test.foo', 'testing'),
+      actions.focus('test.foo'),
+    ]);
+
+    const expectedActions = [
+      {
+        type: actionTypes.BATCH,
+        model: 'test.foo',
+        actions: [
+          {
+            model: 'test.foo',
+            multi: false,
+            silent: false,
+            type: 'rrf/change',
+            value: 'testing',
+          },
+          {
+            model: 'test.foo',
+            type: 'rrf/focus',
+            value: undefined,
+          },
+        ],
+      },
+    ];
+
+    const store = mockStore({}, expectedActions, done);
+
+    store.dispatch(action);
+  });
+
   it('should update the form reducer with each action', () => {
     const reducer = formReducer('test');
 
@@ -80,6 +112,7 @@ describe('batched actions', () => {
   });
 
   it('should dispatch a null action if all actions are falsey', (done) => {
+    const mockStore = configureMockStore([thunk]);
     const testAction = actions.batch('test.foo', [
       false,
       null,

test/form-component-spec.js

@@ -1380,7 +1380,7 @@ Object.keys(testContexts).forEach((testKey) => {
 
         assert.isFalse(store.getState().testForm.$form.valid);
 
-        store.dispatch(actions.merge('test', {
+        store.dispatch(actions.change('test', {
           foo: 'foo valid',
           bar: 'bar valid',
         }));

test/utils.js

@@ -43,8 +43,12 @@ export const defaultTestContexts = {
   },
 };
 
-export function testCreateStore(reducers) {
-  return applyMiddleware(thunk)(createStore)(combineReducers(reducers));
+export function testCreateStore(reducers, thunk = false) {
+  if (thunk) {
+    return applyMiddleware(thunk)(createStore)(combineReducers(reducers));
+  }
+
+  return createStore(combineReducers(reducers));
 }
 
 export function testRender(component, store) {