Redux Reducer Handling complex JSON

38 Views Asked by At

I am building a Redux form in React app which looks like below -

It has multiple leaders and 3 editable fields -

enter image description here

Use Case: User can update any field on any leader and there is a single "Save" that submits all the changes made by user on the screen. The final request should include only the leader and its corresponding fields that were edited by user.

I need to create a JSON for only the fields for a leader that have been edited by the user. For Eg. For 1st leader, user edited only name and initials, Similarly, for 3rd leader, user edited leader home page field , then only these fields should be included in the JSON request. Also if a user edits a field and then undo it, that field should not be included in the final JSON.

Example of JSON I need is below:

leaderChanges : [
{
 leaderID: 1, 
 attributes: [
    {"leaderName" : "John Connor New"},
    {"leaderInitials: "JCN""}
 ]
},
{
 leaderID: 3, 
 attributes: [
    {"leaderHomePage" : "https://kyleressesisdead.com"},
   ]
}
] 

I need to know how do I do this in a redux-reducer without using a boiler-plate code that would manually create this JSON. I will end up performing lot of checks in the code if this is JSON be created manually inside the reducer.

Is there a library I can use for this that would add only the editable fields to state JSON or remove a field from state if a user undo his edit before using the single SAVE option.

Any working example would be a good pointer to share.

0

There are 0 best solutions below