Error with immutable

[dmitrif]

Hi! It's me again. I changed include to use import { combineForms } from 'react-redux-form/lib/immutable'; however, an error appears:

fes_1 |     TypeError: Cannot use 'in' operator to search for 'get' in true
fes_1 |         at /var/frontend/node_modules/react-redux-form/lib/utils/get-from-immutable-state.js:21:18
fes_1 |         at Array.reduce (native)
fes_1 |         at Object.immutableGetFromState [as get] (/var/frontend/node_modules/react-redux-form/lib/utils/get-from-immutable-state.js:17:15)
fes_1 |         at /var/frontend/node_modules/react-redux-form/lib/utils/get-form.js:56:23
fes_1 |         at /var/frontend/node_modules/immutable/dist/immutable.js:4899:25
fes_1 |         at /var/frontend/node_modules/immutable/dist/immutable.js:4364:24
fes_1 |         at /var/frontend/node_modules/immutable/dist/immutable.js:2869:56
fes_1 |         at /var/frontend/node_modules/immutable/dist/immutable.js:3018:36
fes_1 |         at /var/frontend/node_modules/immutable/dist/immutable.js:2834:35
fes_1 |         at /var/frontend/node_modules/immutable/dist/immutable.js:1379:16

The reducer is set up as such:

let forms = combineForms({
  billingInfo: billingInfoInitialState,
});

export default combineReducers({
  config,
  forms
});

And the form is set up as such:

import React from 'react';
import { Control, Form, actions } from 'react-redux-form/lib/immutable';

export default class BillingForm extends React.Component {
  handleSubmit(billingInfo) {
    const { dispatch } = this.props;
  }

  render() {
    return (
      <Form model="billingInfo" 
        onSubmit={(billingInfo) => this.handleSubmit(billingInfo)}>

        <label>Address 1</label>
        <Control.text model="billingInfo.address" />

        <button type="submit">Submit</button>
      </Form>
    );
  }
};

Please advise. Thank you!

[dmitrif]

Also tried using createForms instead, still failing but with a different error:

get-field-from-state.js:39 Uncaught TypeError: Cannot read property 'model' of undefined(…)

[davidkpiano]

I'm pretty sure the check I added in 7efde9f will fix the issue, can you check when the next release goes out?

[dmitrif]

Thanks, David!

I see the tag for 1.1.0 but when trying to install from NPM it's saying that version doesn't exist.

[davidkpiano]

Hmm, try again?

[dmitrif]

I think this particular issue is fixed. but I think I realized why this doesn't work for us, is this library compat with redux-immutablejs?

Cheers.

[davidkpiano]

Paging @erin-doyle - she would know the answer to that 😄 I believe it is supposed to work with redux-immutablejs.

[dmitrif]

Thank you!

It ends up tripping up on lines such as:

Line 19 in get-field-from-state.js const formPath = toPath(form.$form.model);

Since I believe form itself is an immutable object in this case. Along with some other spots.

[davidkpiano]

If you'd like to help out with PRs, I'd gladly get them merged in ASAP. The solution to fixing this is two-fold, so for example:

In get-field-from-state.js:

-const formPath = toPath(form.$form.model);
+const formPath = toPath(s.get(form, ['$form', 'model']));

And then in src/immutable.js:

function immutableGetFieldFromState(state, modelString) {
-  return getField(state, modelString, { getForm: immutableGetForm });
+  return getField(state, modelString, { getForm: immutableGetForm, get: immutableGetFromState });
}

Should be simple fixes, and since you can recreate the errors, you (or someone who uses Immutable.JS) would be best to diagnose them. 🙏

Personally, I do not use Immutable.JS (I use icepick.js so that I can work with standard JS types).

[dmitrif]

@davidkpiano Thanks :) Working on it!