React-redux-form: Possibility to skip store key with combineReducers

[vladshcherbin]

Since probably 80 or more % of the apps will be using store not only with forms, combineReducers function will be used a lot. So, we will have:

forms: combineForms({
  user: initialUserState
}, 'forms')

Is it somehow possible to avoid using forms.user / forms.user.name and just user / user.name, maybe a convention?

[davidkpiano]

Sure, I can provide a mapForms function (I'm sure there's a better name than "mapForms", any suggestions?) that would simply give the object that combineForms uses in Redux's combineReducers():

// Let's come up with a better name than 'mapForms'
import { utils: { mapForms } } from 'react-redux-form';
import { createStore, combineReducers } from 'redux';

const store = createStore(combineReducers({
  existing: existingReducer,
  nonForm: nonFormReducer,
  ...mapForms({
    user: initialUserState,
    foo: initialFooState,
  }),
});

How does this look? You'd just use the spread operator to assign the user, foo, and generated forms reducers directly on the object passed into combineReducers, so that you can access model values by user.name and foo.name.

[vladshcherbin]

Yes, this would be great. Will the Partial Models with just .name work as well?

[davidkpiano]

Will the Partial Models with just .name work as well?

Yes, that's independent of this and will continue to work.

[davidkpiano]

Should I call this createForms({ ... }) instead of mapForms({ ... }) ?

[vladshcherbin]

@davidkpiano createForms, mapForms, composeForms - any would be great, pick one you like the most, we'll be happy with your choice 😉

[davidspiess]

Waiting for this 🎉 createForms sounds good.

[davidkpiano]

Docs here: https://davidkpiano.github.io/react-redux-form/docs/api/createForms.html

import { combineReducers } from 'redux';
import { createForms } from 'react-redux-form';

const initialUserState = {};
const initialGoatState = {};

const reducer = combineReducers({
  foo: fooReducer,
  bar: barReducer,
  ...createForms({
    user: initialUserState,
    goat: initialGoatState,
  }),
});

// reducer state shape will be:
// {
//   foo: fooReducer,
//   bar: barReducer,
//   user: modelReducer('user', initialUserState),
//   goat: modelReducer('goat', initialGoatState),
//   forms: formReducer(''),
// }