React middleware support

[sdirix]

Description
Sometimes general modifications of JSON Forms behavior would be useful. For example to listen on update events and to modify errors and data before they are set.

Solution
Similar to the middleware concept in Redux, the JsonForms component could accept a middleware function.

Conceptually the API could look like this

const loggerMiddleware = (previousState, dispatch, action) => {
  console.log('dispatching', action)
  // here you could modify the action or dispatch multiple ones
  const nextState = dispatch(previousState, action)
  // here you could modify the resulting state
  console.log('next state', nextState)
  return nextState;
}

On JSON Forms side this can be implemented by handling the core state via useState instead of useReducer.

Alternatives

• Instead of adding yet another parameter to the JsonForms component the middleware could also be provided by another context, similar to the JsonFormsStyleContext.
• Instead of the JsonForms component only the JsonFormsStateProvider component is enhanced. In that case the advanced use case of adding a middleware can be done by manually creating the JsonFormsStateProvider instead of using the JsonForms component.

Describe for which setup you like to have the improvement
Framework: [React]

Could also be implemented for Angular

[manju2791]

Description
Sometimes general modifications of JSON Forms behavior would be useful. For example to listen on update events and to modify errors and data before they are set.

Solution
Similar to the middleware concept in Redux, the JsonForms component could accept a middleware function.

Conceptually the API could look like this

const loggerMiddleware = (previousState, dispatch, action) => {
  console.log('dispatching', action)
  // here you could modify the action or dispatch multiple ones
  const nextState = dispatch(previousState, action)
  // here you could modify the resulting state
  console.log('next state', nextState)
  return nextState;
}

On JSON Forms side this can be implemented by handling the core state via useState instead of useReducer.

Alternatives

• Instead of adding yet another parameter to the JsonForms component the middleware could also be provided by another context, similar to the JsonFormsStyleContext.
• Instead of the JsonForms component only the JsonFormsStateProvider component is enhanced. In that case the advanced use case of adding a middleware can be done by manually creating the JsonFormsStateProvider instead of using the JsonForms component.

Describe for which setup you like to have the improvement
Framework: [React]

Could also be implemented for Angular

Could Someone please provide an example of implementing middleware in JSONForms, possibly in standalone JSONForms React version.

[sdirix]

Hi @manju2791, this feature is not yet implemented. I linked it in #1469 because if this middleware approach was implemented, #1469 would already be solved. It's probably preferable over implementing a special solution for #1469.

[andresgutgon]

Coming here form this post https://jsonforms.discourse.group/t/showing-server-side-back-end-errors-on-the-form-in-react-standalone-jsonforms/292

Any updates? : )

Thanks a lot for this awesome work.

My ideal setup would be

1. Disabled frontend validations. Not adding ajv validations at all.
2. Using ajv validations on my node server and when I submit data from a JSONForm return an errors key that I can put back in the form.

I'm considering doing it overriding the provider while the middleware solution is developed.

[sdirix]

Hi @andresgutgon, no update yet. We planed this issue for version 3.x but are still busy with the 3.0 release.

Coming here form this post https://jsonforms.discourse.group/t/showing-server-side-back-end-errors-on-the-form-in-react-standalone-jsonforms/292

To clarify the post in the discussion board: Using a middleware support would be one way to support the use case of showing external errors, however I think it would be best solved via explicit support, e.g. by adding an errors prop to the root component which are mixed in with, or replace, the errors determined within JSON Forms. This is basically option 3 of the discussed post.

[andresgutgon]

I think it would be best solved via explicit support, e.g. by adding an errors prop to the root component which are mixed in with, or replace, the errors determined within JSON Forms

I like it, but this is not possible at the moment right? I mean without overriding default provider.