redux-form and immutable.js

Question

Are there any approaches when using both immutable.js and redux-form that don't require calling .toJS()?

I can see the suggested approach on this issue is to call .toJS() on the Map object before passing it to the form:

getFormState: (state, reduxMountPoint) => state.get(reduxMountPoint).toJS()

Does this not compromise the performance benefit you get from using immutable.js and limit memoization?

I'm interested to know the performance impact of this, will it still be worth using immutable.js in a form heavy application? Are there any other approaches that don't rely on .toJS()?

Erik R. · Accepted Answer · 2016-08-03 08:49:34Z

4

As I contemplate the future of redux-form, I have been going back and forth on whether or not to use ImmutableJS internally. I briefly entertained the idea that I could somehow get the same codebase to work using both, via some facade, but, in the end, the interfaces are just too different, the ImmutableJS interface being considerably more verbose, as a consequence of not enjoying native language syntax.

Making an alternate version of redux-form that uses ImmutableJS would require changing almost every line of code and would be a maintenance nightmare.

Unless someone can show me that the performance advantages of using ImmutableJS outweigh the cost of giving the .toJS() burden to the people (majority?) who choose not to use ImmutableJS, I think the better course of action is to, like Redux itself, remain un-opinionated about storage libraries.

Are there any other approaches that don't rely on .toJS()?

So, to answer your question: No, if a library managing your Redux reducers is expecting plain javascript objects, and you are using ImmutableJS for your Redux store, you've got to do the conversion yourself.

Wish there were a better answer...

EDIT: Version 6 of Redux Form supports ImmutableJS out of the box.

edited Aug 3, 2016 at 8:49

answered Feb 25, 2016 at 15:22

Erik R.

7,2921 gold badge32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ladislav M Over a year ago

There is an alternative to .toJS() and it's called seamless-immutable.

David Khourshid · Accepted Answer · 2016-02-28 16:46:44Z

As Erik mentioned, unfortunately there's no built-in solution with Redux-Form (yet), and that's partly due to the fact that the form state and model state are baked in together instead of separate entities.

If you are okay with separating form and model state, then a modular solution that lets you use Immutable.JS becomes more feasible. That's why I created React-Redux-Form.

Here's how you can have an immutable model reducer with React-Redux-Form:

import { createStore, combineReducers } from 'redux';
import { createModelReducer } from 'react-redux-form/lib/immutable';
import Immutable from 'immutable';

const store = createStore(combineReducers({
  'user': createModelReducer('user', Immutable.Map())
}));

export default store;

If you have an existing Immutable reducer that represents your model, you can decorate it with the Immutable modeled() decorator:

import { createStore, combineReducers } from 'redux';
import { modeled } from 'react-redux-form/lib/immutable';

// existing immutable reducer
import userReducer from '../reducers/user-reducer';

const store = createStore(combineReducers({
  'user': modeled(userReducer, 'user')
}));

export default store;

Naveen Dahiya · Accepted Answer · 2017-01-05 10:30:02Z

0

You can use the "immutable" version of redux-form by importing from redux-form/immutable instead of redux-form.
here's link: http://redux-form.com/6.4.3/examples/immutable/

answered Jan 5, 2017 at 10:30

Naveen Dahiya

2681 silver badge10 bronze badges

Collectives™ on Stack Overflow

redux-form and immutable.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related