redux-field
v6.0.4
Published
Redux form field reducer and actions.
Downloads
37
Readme
redux-field
A Redux reducer and actions to help create controlled input fields.
Sometimes you just have a single field that you want to keep track of without having to create custom actions. Or when you want to control individual form fields like https://vitalets.github.io/x-editable/ with Redux.
If you want to save form progress one field at a time locally or direct to server this is for you.
This library can help make it easier to have the user edit fields inside a table grid.
Usage
First step is to add the reducer.
import fieldReducer from 'redux-field'
const reducers = combineReducers({ form: fieldReducer })
const store = createStore(reducers)
If you want to wrap a React component that injects actions and props look at the redux-field-connect module.
props
Reducer State
blur
:false
- Whentrue
the field is open but does not have focus or is inactive.dragCount
:0
- Needed for nested divs to keep track of activefocus
status.error
:null
- String usually. Could be object for more complex error if you wanted.focus
:false
- When true the field is open and it has focus.id
:null
- String. Used as a unique key/id for this specific field value. So theprefix
component prop can stay the same but the field changes. Editing an entity (prefix
is entity id) one field at a time (id
is field id) is a good example use for this.initialValue
:null
- The value when the field was initialized. Would be the saved (server) value.invalid
:{}
- Index of known invalid values. If checking against an API for validity this will persist previously found invalid results. Up to the developer to decide how it to represent the field value as a key. The invalid value is an error string or other data needed to render the error message/notice.meta
:null
- Any value you want to keep track of related to field state.savedProgress
:0
- Percentage. Integer between 0-99.savedValue
:null
- If the backend changes the value and you want to show the difference you can place that updated value here.isSaving
:false
- Is there an active request attempting to save the field value?isTouched
:false
- Have there been blur, drag, focus, open, close, or value interactions with the field. Running submit on an otherwise untouched leaves it untouched.valid
:{}
- Index of known valid values. Responses from a backend or API.value
:null
- The value of the field goes here. Probably the most important state property.
Calculated Props
errorMessage
: The error message string.hasError
: There is an error and/or an error message is available.initialValue
: The initial value.invalidValue
: Result in theinvalid
index for the current fieldvalue
.isEditing
: User is editing the field value. There is focus and it's not pristine.isClosed
: The field is closed.isDirty
: Fieldvalue
does not match the initial value.isValid
: An update (dirty)value
that does not have an error.isOpen
: The field hasblur
orfocus
.isPristine
: The current fieldvalue
matches the initial value.isSaved
: The savedValue is the same as the current field value. Might need a better name.status
: A machine text string representing status. (success
,error
) Can storestatus
property to theerror
index for this value to customize.suggestion
: When there is asuggestion
property on theerror
index for current fieldvalue
.validValue
: The value of thevalid
index related to the current fieldvalue
.
Actions
formEvent
Handlers for input field triggers.
onBlur
- When the input has been exited.onChange
- Every time value changes.onDragEnter
- Drag and drop enter.onDragLeave
- Drag and drop leave.onFocus
- When the input has (been clicked on) focus.onInput
- Alias ofonChange
.onSubmit
- Return key inside a form.- onDrop - Not implemented. Best to handle this yourself and use an
onChange
or other to update state as needed. Submit an issue if you disagree and have an idea of what the reducer should do.
fieldEvent
Actions related to the field and/or its container.
clear
- Close the field. Reset all values to default.clearError
- Reseterror
tonull
.close
- The field has been "closed". Allows you do something like display the field in its finished form instead of as an input.error
- Async error result. Sync errors should be calculated in container. SeederivedState()
.invalid
- Set values that are known invalid. Useful to keep track of previous results from API calls. Makes feedback faster and prevents unnecessary requests..meta
- Set metadata about the editing process or field. Here if you need a place to put extra information.open
- The first thing that is called to initiate editing of a field. Toggle the preview and input displays of a field. You can overwriteid
value
, andinitialValue
here.save
- When an async request has been made that is saving the updated value to the server.saved
- Current value has been saved.savedProgress
- Record upload/save progress. If saving a file and you want to keep track of how much has been uploaded.valid
- Similar toinvalid
. Save that a value is valid. Probably the result of an async request. Could also store temporary meta info about the value here.
formHandler
Same as formEvent
but on
replaced with handle
.
handleBlur, handleChange, handleDragEnter, handleDragLeave, handleFocus, handleInput, handleSubmit
Selectors
selectForm(state)
: state.formselectFieldState(state, prefix, selectFormState = selectForm)
: Please note that it will return defaultState if there is an invalid prefix.getFieldState(state, props)
:selectFieldState(state, props.prefix, props.selectForm)