Skip to main content
Reducers handle state updates in response to dispatched actions. JSON Forms provides Redux-compatible reducers that can be integrated into any Redux-based application.

​
Main Reducer Configuration

​
jsonFormsReducerConfig

Complete reducer configuration for JSON Forms state. 
export const jsonFormsReducerConfig = {
  core: coreReducer,
  renderers: rendererReducer,
  cells: cellReducer,
  config: configReducer,
  uischemas: uischemaRegistryReducer,
  defaultData: defaultDataReducer,
  i18n: i18nReducer,
};
Usage with Redux: 
import { combineReducers, createStore } from 'redux';
import { jsonFormsReducerConfig } from '@jsonforms/core';

const store = createStore(
  combineReducers({ jsonforms: combineReducers(jsonFormsReducerConfig) })
);
Usage with Redux Toolkit: 
import { configureStore, combineReducers } from '@reduxjs/toolkit';
import { jsonFormsReducerConfig } from '@jsonforms/core';

const store = configureStore({
  reducer: {
    jsonforms: combineReducers(jsonFormsReducerConfig),
  },
});

​
Core Reducer

​
coreReducer

Handles core JSON Forms state including data, schema, validation, and errors. 
function coreReducer(
  state: JsonFormsCore = initState,
  action: CoreActions
): JsonFormsCore
​
state
JsonFormsCore
Current core state. Defaults to initState.
​
action
CoreActions
One of: InitAction, UpdateCoreAction, UpdateAction, UpdateErrorsAction, SetAjvAction, SetSchemaAction, SetUISchemaAction, SetValidationModeAction
​
return
JsonFormsCore
Updated core state
State Shape: 
interface JsonFormsCore {
  data: any;
  schema: JsonSchema;
  uischema: UISchemaElement | undefined;
  errors: ErrorObject[];
  validator: ValidateFunction | undefined;
  ajv: Ajv | undefined;
  validationMode: ValidationMode;
  additionalErrors: ErrorObject[];
}
Initial State: 
export const initState: JsonFormsCore = {
  data: {},
  schema: {},
  uischema: undefined,
  errors: [],
  validator: undefined,
  ajv: undefined,
  validationMode: 'ValidateAndShow',
  additionalErrors: [],
};
Handled Actions:
  • INIT - Initialize form with data, schema, and UI schema
  • UPDATE_CORE - Update multiple core properties at once
  • UPDATE_DATA - Update data at a specific path
  • UPDATE_ERRORS - Update validation errors
  • SET_SCHEMA - Set the JSON schema
  • SET_UISCHEMA - Set the UI schema
  • SET_AJV - Set custom AJV instance
  • SET_VALIDATION_MODE - Change validation mode
Example: 
import { coreReducer, init, update } from '@jsonforms/core';

let state = coreReducer(undefined, init(
  { name: 'John' },
  { type: 'object', properties: { name: { type: 'string' } } }
));

state = coreReducer(state, update('name', () => 'Jane'));
// state.data.name === 'Jane'

​
Helper Functions

​
getOrCreateAjv

Get existing AJV instance or create a new one. 
function getOrCreateAjv(
  state: JsonFormsCore,
  action?: InitAction | UpdateCoreAction
): Ajv
​
state
JsonFormsCore
required
Current core state
​
action
InitAction | UpdateCoreAction
Action that may contain AJV options
​
return
Ajv
AJV instance for validation

​
getValidationMode

Extract validation mode from state or action. 
function getValidationMode(
  state: JsonFormsCore,
  action?: InitAction | UpdateCoreAction
): ValidationMode
​
state
JsonFormsCore
required
Current core state
​
action
InitAction | UpdateCoreAction
Action that may contain validation mode option
​
return
ValidationMode
One of: ‘ValidateAndShow’, ‘ValidateAndHide’, ‘NoValidation’

​
getAdditionalErrors

Extract additional errors from state or action. 
function getAdditionalErrors(
  state: JsonFormsCore,
  action?: InitAction | UpdateCoreAction
): ErrorObject[]
​
state
JsonFormsCore
required
Current core state
​
action
InitAction | UpdateCoreAction
Action that may contain additional errors
​
return
ErrorObject[]
Array of additional validation errors

​
UI Schema Resolution

​
findUISchema

Find a registered UI schema or generate a default one. 
function findUISchema(
  uischemas: JsonFormsUISchemaRegistryEntry[],
  schema: JsonSchema,
  schemaPath: string,
  path: string,
  fallback: string | (() => UISchemaElement) = 'VerticalLayout',
  control?: ControlElement,
  rootSchema?: JsonSchema
): UISchemaElement
​
uischemas
JsonFormsUISchemaRegistryEntry[]
required
Array of registered UI schemas
​
schema
JsonSchema
required
JSON schema to find UI schema for
​
schemaPath
string
required
Schema path (JSON Pointer)
​
path
string
required
Data path
​
fallback
string | (() => UISchemaElement)
Layout type or generator function (default: ‘VerticalLayout’)
​
control
ControlElement
Control element that may have inline UI schema options
​
rootSchema
JsonSchema
Root schema for resolution
​
return
UISchemaElement
Resolved or generated UI schema
Example: 
import { findUISchema } from '@jsonforms/core';

const uischema = findUISchema(
  registeredUISchemas,
  schema,
  '#/properties/address',
  'address',
  'VerticalLayout'
);

​
Validation Modes

JSON Forms supports three validation modes:

​
ValidateAndShow

Validate data and display all validation errors immediately. This is the default mode. 
import { init } from '@jsonforms/core';

const action = init(data, schema, uischema, {
  validationMode: 'ValidateAndShow'
});

​
ValidateAndHide

Validate data but don’t display errors until the user interacts with the field. 
const action = init(data, schema, uischema, {
  validationMode: 'ValidateAndHide'
});

​
NoValidation

Disable all validation. No validator is created. 
const action = init(data, schema, uischema, {
  validationMode: 'NoValidation'
});

​
State Updates

The core reducer handles data updates efficiently:

​
Path-based Updates

When updating via UPDATE_DATA action, the reducer:
  1. Retrieves current value at the path
  2. Passes it to the updater function
  3. Updates the state immutably
  4. Re-runs validation
import { update } from '@jsonforms/core';

// Update nested property
const action = update('person.address.city', () => 'New York');

// Update array
const arrayAction = update('items', (items) => {
  const newItems = [...items];
  newItems[0] = updatedItem;
  return newItems;
});

​
Schema Updates

When the schema changes via SET_SCHEMA:
  1. A new validator is compiled if validation is enabled
  2. Current data is re-validated against the new schema
  3. Errors are updated
import { setSchema } from '@jsonforms/core';

const action = setSchema({
  type: 'object',
  properties: {
    name: { type: 'string', minLength: 3 }
  }
});

Build docs developers (and LLMs) love

Get started for freeTalk to us