State Management
Redux state management for the patient UI form renderer in crelio-app.
š¤ Ritu Katariaš
Updated: Mar 13, 2026š·ļø feature
State Management
The patient UI uses Redux with a generic named reducer factory pattern. Each state key gets a dynamically created reducer via createNamedReducer(stateKey, defaultState).
Redux Store Slices
| Slice | Purpose |
|---|---|
values | Form values ā { [formId]: { [fieldId]: value } } |
rendererConfig | Form configs ā { [formId]: IFormConfig & IFormConfigQuestion } |
common | Shared state: labForm, patientDetails, billDetails, consentQuestions |
formManagement | Iteration tracking: { iteration: {}, iterationValues: [] } |
progress | Section completion tracking |
store | Lab config, patient profiles, store settings |
alert | Toast notifications |
modal | Modal state |
layout | Navigation button config (labels, visibility, disabled state) |
Key Actions
File: multiSectionFormActions.ts
| Action | Description |
|---|---|
updateSectionValues(formId, values) | Merges values into values[formId] |
updateSectionConfig(formId, config) | Merges config into rendererConfig[formId] |
clearSectionValues(formId) | Clears all values for a form |
setIterationValues() | Saves current values as a completed iteration |
updateIterationValues() | Updates the iteration values array |
Validation Flow
- On every
currentFormValueschange,JsonToForm.validateForm()runs - Checks all
mandatoryFieldsandvalidationFieldsagainstcheckHasError() - Calls
triggerFormAction('setFormInvalid', [isInvalid, invalidFieldIds])to notify the parent - Field-level:
BaseControl.onBlurācheckHasError()supports mandatory checks, regex validators, and function validators - Custom field validators come from
consentValidatorMapper()inConsentForm/utils.ts