Multi-Step Form With a Shared Store
Build a three-step signup form (Account, Profile, Review) that passes data between steps, structured the way Redux would structure it. The preview offers React alone, so build that shape with useReducer and context: one store, actions for every change, and steps that read from it instead of holding their own state.
The starter works, but each step keeps its own useState, so going Back loses what was typed.
Requirements
- Account: a valid email, and a password of at least 8 characters. Profile: a name, and a role from Engineer, Designer or Manager. Review: everything entered, and a Submit button.
- Back and Next move between steps, and nothing typed is ever lost.
- Next validates the current step first. Errors show under their fields, marked with
aria-invalidand linked witharia-describedby, and editing a field clears its error. - Show which step is current, both visibly and with
aria-current="step". - Submit calls
submitSignup(values)fromapi.js. While it is in flight, disable every control. On success, show a welcome message with the name. On failure, show the server's message on the Review step. Any email containing "taken" fails.
Hints
Hint 1
Put step, values, errors, status and submitError in one reducer. Every change is an action, such as { type: "field", name, value }, next, back, submit, submitted or failed.
Hint 2
Validate inside the next action: compute the errors for the current step, and only advance when there are none. The reducer stays the single place that decides.
Hint 3
A <fieldset disabled> around the form's controls disables all of them at once while the request is in flight.