I am building a Redux form in React app which looks like below -
It has multiple leaders and 3 editable fields -
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.
