如何在進程的不同階段將數據臨時存儲在 redux 或 redux 傳奇中

Question

（這主要是關於如何實現它的問題）

我是新來的反應並嘗試使用項目Hooks + Redux + Saga.

反應16.9

邏輯流程

* 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.

我的問題是實現該功能的最佳方式是什么：

• 允許 STEP1 上的學生單擊“ Next button （尚未保存任何內容），能夠顯示從下一頁頂部的表單輸入的字段

• 然后只有在步驟 2 上按save后，才能保存步驟 1 和步驟 2 頁面中的所有信息。

我想了解的主要是那種 state 管理。

提前致謝...

Answer 1

可能的想法：
1. 您將擁有一個名為Steps的組件，其中包含子組件Step1和Step2 。

2. Steps組件將具有{currentStep,step1Data,step2Data}類型的 state

3. 根據currentStep的值，您將渲染Step1或Step2組件，其中將顯示 forms。

4. 當學生在Step1或Step2填寫表格時，數據將存儲在Steps組件的 state 的step1Data或step2Data中。

5. 保存step1Data和step2Data后將保存在 redux（或服務器調用 haeppen）上。

謝謝