Adding field diffing to form reducer to dissociate removed fields. Fixes #84

Author: davidkpiano

package.json

@@ -60,6 +60,7 @@
     "react-redux": "^4.4.0",
     "redux": "^3.3.1",
     "redux-mock-store": "0.0.6",
+    "redux-test-store": "^0.3.0",
     "redux-thunk": "^2.0.1",
     "should": "^8.2.2",
     "webpack": "^1.12.14"

src/reducers/form-reducer.js

@@ -6,6 +6,7 @@ import isEqual from 'lodash/isEqual';
 import isPlainObject from 'lodash/isPlainObject';
 import mapValues from 'lodash/mapValues';
 import toPath from 'lodash/toPath';
+import startsWith from 'lodash/startsWith';
 import flatten from 'flat';
 
 import actionTypes from '../action-types';
@@ -82,6 +83,24 @@ function formIsValid(formState) {
     && every(formState.errors, error => !error);
 }
 
+function removeDiff(state, newValue, localPath) {
+  const localKeys = Object.keys(state.fields)
+    .filter((fieldKey) => startsWith(fieldKey, localPath));
+
+  let finalState = state;
+
+  localKeys.forEach((localKey) => {
+    if (!_get({ [localPath]: newValue }, localKey, false)) {
+      finalState = icepick.updateIn(
+        finalState,
+        ['fields'],
+        (obj) => icepick.dissoc(obj, localKey));
+    }
+  });
+
+  return finalState;
+}
+
 function createInitialFormState(model, initialState) {
   const formState = icepick.set(initialFormState,
     'model', model);
@@ -127,7 +146,18 @@ function _createFormReducer(model, initialState) {
           focus: true,
         });
 
-      case actionTypes.CHANGE:
+      case actionTypes.CHANGE: {
+        const setDirtyState = icepick.merge(state, {
+          dirty: true,
+          pristine: false,
+        });
+
+        return removeDiff(setField(setDirtyState, localPath, {
+          dirty: true,
+          pristine: false,
+        }), action.value, localPath);
+      }
+
       case actionTypes.SET_DIRTY: {
         const setDirtyState = icepick.merge(state, {
           dirty: true,

test/model-actions-spec.js

@@ -194,4 +194,42 @@ describe('model actions', () => {
     });
     /* eslint-enable */
   });
+
+  describe('remove()', () => {
+    it('should dissociate removed fields from the form state', (done) => {
+      const initialState = { items: [1, 2, 3] };
+      const reducer = formReducer('test', initialState);
+
+      assert.property(reducer(undefined, { type: '' }).fields, 'items.2');
+
+      const dispatch = action => {
+        assert.notProperty(reducer(undefined, action).fields, 'items.2');
+        done();
+      };
+
+      const getState = () => ({ test: initialState });
+
+      actions.remove('test.items', 2)(dispatch, getState);
+    });
+  });
+
+  describe('filter()', () => {
+    it('should dissociate filtered fields from the form state', (done) => {
+      const initialState = { items: [1, 2, 3, 4, 5] };
+      const reducer = formReducer('test', initialState);
+
+      assert.property(reducer(undefined, { type: '' }).fields, 'items.3');
+      assert.property(reducer(undefined, { type: '' }).fields, 'items.4');
+
+      const dispatch = action => {
+        assert.notProperty(reducer(undefined, action).fields, 'items.3');
+        assert.notProperty(reducer(undefined, action).fields, 'items.4');
+        done();
+      };
+
+      const getState = () => ({ test: initialState });
+
+      actions.filter('test.items', (n) => n % 2)(dispatch, getState);
+    });
+  });
 });