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() ?

Answer 1

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.

Answer 2

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;

Answer 3

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/