Skip to content

Latest commit

 

History

History
60 lines (43 loc) · 2.13 KB

combineForms.md

File metadata and controls

60 lines (43 loc) · 2.13 KB

combineForms(forms, [model], [options])

Similar to combineReducers() in redux, the combineForms() helper function takes a forms object where:

  • each key is a string model path
  • each value is either:
    • (Any) an initial state, or
    • (Function) an existing reducer

and turns it into a single reducing function (using combineReducers() internally) where essentially:

  • each key/value pair is a modelReducer()
  • a 'forms' key on the same object is a single formReducer() that handles all forms for all models. (configurable in options)

Arguments

  1. forms (Object): An object whose keys correspond to relative string model paths and whose values correspond to:
  • (Any) an initial state for the model, or
  • (Function) an existing reducer for the model.
  1. [model = ''] (String): The string representation of the parent model containing the child models in the forms object. Defaults to an empty string.
  2. [options] (Object): An options object to override the default options for combineForms():
  • key (String): The single formReducer key. Defaults to 'forms'.
  • plugins (Array): An array of plugins to pass into the formReducer(). Defaults to no plugins.

Returns

(Function): A reducer which updates both the model state and the form state for each of the models inside forms.

Notes

  • The model provided to combineForms() must be the exact path in the state to the parent model. For most use-case scenarios, this is sufficient:
const initialUserState = {};
const initialGoatState = {};

const store = createStore(combineForms({
  user: initialUserState,
  goat: initialGoatState,
}));

However, for deeper parent models, the full path string must be provided:

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

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

// user model state accessed via 'deep.user'
// form state accessed via 'deep.forms'
// user form state accessed via 'deep.forms.user'