I am currently developing an application that combines a .NET Core backend with a React frontend, using React Hook Form for managing forms. Unlike typical single-page applications, my frontend is not built in such a way.
On a specific page of the application, I have two separate forms placed in different sections. These forms essentially represent two parts of the same object that needs to be submitted together by clicking on a single "Save" button. My aim is to streamline the process and avoid unnecessary HTTP calls - one call each for fetching and saving the combined data from both forms.
One solution I have been contemplating involves utilizing Redux to create a shared state for both forms. This would allow me to consolidate the data when the "Save" button is triggered. However, I am facing challenges in implementing this effectively, as most examples I have encountered focus on multi-step forms with distinct "Next" or "Save" buttons per step. In my scenario, I need to save two form sections simultaneously.
My current plan includes:
- Leveraging Redux to manage the state of both forms. - Finding a way to aggregate form data in Redux upon clicking the "Save" button. - Executing a singular API call for saving the compiled object and another for retrieving it.
My queries are:
- How can I efficiently handle and merge the states of two disparate forms residing in separate components using Redux? - Are there established patterns or best practices for tackling this type of form management within a React application employing Redux?
If you have any suggestions or insights on how to address this issue, I would greatly appreciate your input. Whether it's code snippets or conceptual guidance, I am keen to learn how to set up this process correctly.
Thank you in advance for your assistance!