How do I config styles or classes I want to use for controls or forms?

[zwjohn]

@sdirix I tested with the approach you recommended, and I wasn’t able to get the dispatch function out of useJsonForms(). Please see screenshot above. can you please advise? Thanks!

[zwjohn]

The context is provided by the JsonFormsStateProvider, so you need to place your logic in a component contained by it, e.g.

<JsonFormsStateProvider ...>
  <MyJsonFormsDispatch/>
</JsonFormsStateProvider />

and

MyJsonFormsDispatch = () => {
  // your logic here, e.g. const { dispatch } = useJsonForms(); etc.
  return (<JsonFormsDispatch onChange={handleChanges}/>);
}

[zwjohn]

Ok, I implemented MyJsonFormsDispatch wrapped within JsonFormsStateProvider, however I am getting infinite loop when calling dispatch. “Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops”. What am I doing wrong please?

const MyJsonFormsDispatch = (props)=>{
const { dispatch } = useJsonForms();
const handleChanges = ({errors, data}) => {
if(errors && errors.length>0){
const newErrors = errors.map((error)=>{
error.message = “Updated Error Message”;
return error;
});
dispatch(updateErrors(newErrors));
}
};
return
}

Too bad :frowning: I have to actually debug to see what the problem exactly is, which would be easier if you could post a reproducible example somewhere, for example on Github.

Assuming your remaining code is correct, it could be a problem with the standalone version of JSON Forms as this was only tested with Redux. Assuming the problem is only the case when you call dispatch could you try to not call dispatch on every change notification you get? Maybe we’re always sending a change notification out with every update, causing the endless loop. If that’s the case you need to check the errors whether they are already changed, e.g. contain your updated error message and if that’s the case don’t call the dispatch.

[zwjohn]

thanks for the hint, I added the object change check before calling dispatch, and it worked. It seems your library works best when using Redux, and we don’t use Redux in our projects, especially in our Angular projects, we haven’t seen the need to use Redux. I really wished your core could be pure without Redux. Also, there isn’t much documentation on Angular implementation yet, I was wondering if you have plan to add more Angular related coding examples and documentation? Thanks!

We originally developed JSON Forms with a hard dependency on Redux. However as time went by and React gained additional features like context and hooks it became apparent that we no longer need to depend on it. So we planned and are currently actively working on removing Redux from JSON Forms. However this just takes time as it’s so engrained in our code base.

The first step was to remove the runtime dependency on Redux which we did a while ago for the React renderers. The Redux-less version is pretty stable now. Mostly some features are missing, like for example exposing the dispatch in some way.

We don’t cover the Angular renderers as much in the documentation as they are used substantially less than the React renderers. However we still are maintaining them and just a few weeks ago removed the Redux dependency from them too and updated to the recently released Angular 9. If you are interested in them you can try the next stream which already contains these changes and this PR updating the angular-playgound.

[zwjohn]

Fantastic! Thanks for the explanation, will try out Angular Playground. Cheers!