Load lại trang không bị mất dữ liệu

Chào mọi người ! Hiện tại mình đang bị bí chỗ này, mong mọi người giúp đỡ mình, mình xin trình bày ở dưới:

Mình đang làm một trang liên hệ, trang này sẽ có 3 steps 1, 2 và 3 :

step 1: Form chứa các trường và các ô input, checkbox vv.. để người dùng nhập vào. Và dữ liệu strong step1 sẽ được lưu vào store ( của Redux )

step 2 : Lấy dữ liệu trong Store mà người dùng vừa nhập tại step 1, và show ra để họ đối chiếu lại, nếu thấy chỗ nào nhập sai có thể back lại step1 và sửa lại.

step 3: bước này đơn giản chỉ là thông báo lại gửi thành công hay thất bại

Theo phân tích vậy thì mình chia làm 3 component là : Step1, Step2 và Step3. Trong trang liên hệ (contact.js) mình import 3 componjent trên, mình có thiết lập state ban đầu là :

state= {
    curStep: 1
 }

và dựa vào cái state trên để render() 3 component kia. Khi nhấn Next or Prev mình sẽ set lại state cho nó. Và hiện tại trang contact của mình đang chạy tốt. Tuy nhiên có một vấn đề là khi mình đang ở step 2, maf người dùng vô tình load lại trang thì trang contact của mình sẽ bị render() lại từ đầu và lại trở về step1 (vì ở trên mình set state mặc định là 1) hơn nữa dữ liệu người dùng đã nhập tại step1 lưu trong store cũng bị tiêu luôn : (

Hiện tại mình đang nghĩ đến giải pháp lấy curStep thông qua params từ trên đường dẫn router như thế sẽ đảm bảo không bị mất curStep khi load lại trang nhưng còn cái dữ liệu thì mình chưa nghĩ ra giải pháp nào để không bị mất ngoài cách lưu vào trong localStorage .

Vì vậy mình muốn tham khảo ý kiến mọi người về vấn đề này. Mong nhận được ý kiến đóng góp & giúp đỡ từ các bạn ! Tks you mọi người !