(Ticket update needed) Extract form data from Formik/read data in and out of Redux

[micahchiang]

Description

Original intention of this ticket: Add a way for users to hook into Redux and read data in or out, as needed. TICKET NEEDS UPDATING TO REFLECT THE ORIGINAL INTENTION

Form applications are built using a light formik wrapper. One of the benefits of this is that formik provides its own react context, managing form state and making data accessible throughout the component tree. Ideally, users would be able to extract their form data from their form app, and use it how they wish.

Currently a user would import FormRouter and build their application with route composition:

<FormRouter basename={props.basename} formData={props.initialValues}>
    <Route index element={<PersonalInformationPage />} />
    <Route path="/page-two" element={<ContactInformationPage />} />
</FormRouter>

With this, one possibility could be to pass a stateHandler into FormRouter and invoke it when formik form values are updated:

// initialValues may be properties extracted from a json-schema
const [formState, setFormState] = useState({initialValues});

const updateFormDataHandler = (data) => {
  const updatedData = {...formState, ...data};
  setFormState(updatedData) 
};

<FormRouter basename={props.basename} formData={props.initialValues} formDataHandler={updateFormDataHandler}>
    <Route index element={<PersonalInformationPage />} />
    <Route path="/page-two" element={<ContactInformationPage />} />
</FormRouter>

Tasks

• [ ] Determine how best to make form data accessible outside of Formik
• [ ] Implement solution
• [ ] Write documentation around the approach

Acceptance Criteria

• [ ] Tasks have been completed
• [ ] PR has been merged into main

[micahchiang]

Potentially revisit when stubbing tickets from #504. With prefill & SiP, we need a way of hooking into the redux store for returned data from vets-api to use for initialValues. We also need a way to update the redux store with any new form information that should be saved on page progression or exiting the form for finishing later. We may be able to just take formik values and sync them into redux.