how to temporarily store data in redux or redux saga on different phases of a process

Question

(This is mostly a question on how to implement it)

I am new to react and trying to implement the logic below using the current configuration of the project Hooks + Redux + Saga.

React 16.9

LOGIC FLOW

* The user is authenticated already.
* These two steps need to happen on the same URL but the UI displayed on different pages.
* No dependency allowed.

STEP 1:
-Each student has one form they need to fill out.
-The form has two fields: course and teacher. (value has to be typed)
-Once the two fields are filled out press button next.  

STEP2:
-The fields typed by the student will be displayed on the top of the page
-On this page, the student has a list of materials they can pick and add to the list to attend the course. 
-After choosing the material, the student can click Save
-Now when the student clicks Save, there is a page redirect to the home page.

My question is what would be the best way to implement the functionality:

• that allows the student on STEP1 to click the Next button (Nothing is save yet), have the ability to show the fields entered from the form on the top of the next page

• then only after pressing save on STEP 2, be able to save all the informations from STEP 1 and STEP 2 pages.

It's mostly that kind of state management that i am trying to understand.

thanks in advance...

Answer 1

Possible Idea:
1. You will have a component named Steps which contain child Components Step1 and Step2 .

2. The Steps component will have a state of type {currentStep,step1Data,step2Data}

3. Based on the value of currentStep you will render Step1 or Step2 component which will show the forms.

4. when student will fill form in Step1 or Step2 the data will be stored in step1Data or step2Data of state of Steps component.

5. After save step1Data and step2Data will be saved on redux(or a server call haeppen).

Thanks