Toolkit for building forms with React & Redux
yarn add @heavycookie/react-redux-form
This is the base of a react redux form.
It has 3 main property :
model
: A reference to the redux objectaction
: A function executed at each sub-element updateonSubmit
: A function executed on form submit
They are all other .jsx
located in src/components
.
They build a HTML component with div generally enclosing a label, a form control element (like <input />
, <checkbox />
, etc.), and a potential list of errors.
They have two main props :
mapping
: which can be a string or an array (see immutable.js path) representing the path of the value from the form's attributemodel
.label
: if present, it displays the label of the field
At @HeavyCookie, we define redux actions for each reducer in a separate file named actions.js
, next to our reducer.js
.
This is an actions.js
example:
// @flow
import * as ActionHelper from '@heavycookie/react-redux-form/redux/actions'
export const UPDATE = 'UPDATE'
export type Update = ActionHelper.UpdateForm<'UPDATE'>
export const update = ActionHelper.updateForm(UPDATE)
export type Actions = Update
update
function generate an object with the UPDATE
type and the field mapping defined in controller component with the current value of this component. It's this action which is triggered by the <Form />
update function.
It's a normalized object type, because it's used with our reducer helper.
This is an example of our reducer helper:
import * as FormHelper from '@heavycookie/react-redux-form/redux/reducer'
import * as State from './state'
import * as Actions from './actions'
export default (state: State.State = State.default(), action: Actions.Actions): State.State => {
console.log(state)
switch(action.type) {
case Actions.UPDATE:
const updatedForm = FormHelper.updateField(state.form, action.field, action.value)
return { ...state, form: updatedForm }
}
return state
}
updateField
update the original form field with the provided value.