React-redux-form: Possibility to create store form object when actual form is created

[vladshcherbin]

Currently, the initial store has the model and the form state.

A single form's field is an object with 15 keys. So, a simple form with 6 fields and a $form object will be a nested object with ~ 110-120 keys. If there are 10 forms in the app (imagine admin panel) - the numbers will be different.

I'm not sure if this store pollution is good and how can it affect performance. Is it possible to create a form object when the actual form is created?

[davidkpiano]

Yes, that would be a good enhancement and I'm sure it's possible without changing the code too much. It would have to be specified in the third argument (options) of formReducer:

// FUTURE API
const userFormReducer = formReducer('user', initialUserState, {lazy: true});

// or in combineForms:
const forms = combineForms({
  user: initialUserState,
  foo: initialFooState,
  bar: initialBarState,
}, '', {lazy: true});

This behavior wouldn't be on by default because that would be a breaking change - the form state is made available throughout the app initially regardless of if the form was physically created or not, and that state can be important for some use cases.

Does this {lazy: true} option look good to you?

[vladshcherbin]

Yes, this would be awesome.

[vladshcherbin]

Hey, @davidkpiano . Any news on this or ETA? :)

[davidkpiano]

@VladShcherbin I'll be working on it this weekend - was prioritizing bug fixes first. However, you can easily create a custom form reducer that does this for you:

import { formReducer } from 'react-redux-form';

const initialState = { ... }; // initial model state

const activeFormReducer = formReducer(); // form reducer without state

export default function myFormReducer(state = null, action) {
  if (!action.model) return state;

  return activeFormReducer(state || initialState, action);
}

Something like that (the above code isn't tested yet, but should work in theory. You might need to tweak a couple things.)

[vladshcherbin]

@davidkpiano don't worry, I'll wait until you'll have time to make this enhancement.

Currently, I'm using a simple custom forms package, would like to move to rrf when this one will be released ;)

[vladshcherbin]

@davidkpiano hey, maybe you can add this option to combineReducers?

[davidkpiano]

That's not possible - combineReducers comes from Redux.

[vladshcherbin]

@davidkpiano , sorry, my mistake. I meant to add this option to combineForms.

[vladshcherbin]

Some kind of this, so it is passed to formReducer.

const store = createStore(combineReducers({
  deep: combineForms({
    user: initialUserState,
    goat: initialGoatState,
  }, 'deep', { lazy: true }),
}));

[davidkpiano]

Sure thing, I'll work on that.

[vladshcherbin]

@davidkpiano I tried to setup the forms this way, but it's not working as I thought it should.

The form object is created in store when the form is changed, but when you unmount the component, the form state is still in the store. The way I wanted it to work is like a LocalForm, but saving in redux store.

So, when the Form is mounted, its state is created in redux, when it's unmounted - it's destroyed in redux store.

Some kind of this:

class Form extends Component {
  componentWillMount() {
    this.props.dispatch(createForm(this.props.model, this.props.initialValues))
  }

  componentWillUnmount() {
    this.props.dispatch(removeForm(this.props.model))
  }

  render() {
    ...
  }
}

Is it somehow possible to do now or any future plans?