Skip to content
This repository was archived by the owner on Aug 23, 2022. It is now read-only.

React Redux Form v0.8.0

Compare
Choose a tag to compare
@davidkpiano davidkpiano released this 06 Mar 03:09
· 1413 commits to master since this release

New Actions

Version 0.8 includes a few new helpful actions:

  • resetValidity(model) and resetErrors(model) can be dispatched to reset the validity and errors of any model at any time.
  • validateErrors(model, errorValidators) can be dispatched to validate (and set) the errors of a model based on the errorValidators, which are functions or a keyed object with error validator functions.
    • This works much in the same way that validate(model, validators) works, but validates that an error exists (i.e. the inverse action).

New Props

  • <Field errors={{...}}> and <Form errors={{...}}> can be used to specify an error validation function or keyed object with error validator functions for validation. This is especially useful when you want to hard-code error messages inside your components (of course, hard-coding is not recommended).
<Field model="user.email"
  errors={{
    invalid: (val) => !isEmail(val) && 'Email is invalid.'
  }}
>

Enhancements

  • createModelReducer and createFormReducer have been renamed to modelReducer and formReducer, respectively.
  • The formReducer(...) function now takes a second argument: the initialState of the model. This lets the form reducer know:
    • what fields should be initialized in the form state, and
    • what the initial values are of each model, in the .initialValue prop of the field state.
const initialUserState = {
  email: ''
};

const reducer = combineReducers({
-  user: createModelReducer('user', initialUserState),
-  userForm: createFormReducer('user'),
+  user: modelReducer('user', initialUserState),
+  userForm: formReducer('user', initialUserState),
});

// in a connected component render() method:
- { getField(userForm, 'email').valid && <div>Email invalid</div> }
+ { userForm.fields.email.valid && <div>Email invalid</div> }

Bug Fixes

  • The setTouched(...) action now sets the form state to touched (Thanks @lasergoat: #44)
  • Validation for <Field> components now always happens immediately when the form is loaded. This fixes the assumption that new forms are always valid; as this is seldom the case.