CODEWITHSUNDEEP
reactjsmobxsession-storagemobx-persist
Michael Sync
Michael Sync

Reputation: 5014

How to use the rehydration with mobx-persist

I am new to mobx-persist. I am not able to figure out how rehydration works in mobx-persist. I tried asking about it in github but got no reply so far. I am wondering if anyone here is able to point me the right direction.

The problem that I am trying to solve is to prevent losing the react states on the page refresh. I want to keep the stats in the session storage and load them back when the page is refreshed. (Note: I managed to do it by accessing the session storage directly from the react store but I thought that mobx-persist might do the better job.)

I created a sample here. https://github.com/michaelsync/js-lab/tree/master/mobx-persist-sample.

You can use the following command to run the sample.

It has two components called "entry" page and "result". User can enter something in "entry" page and show that data in the "result" page. There is one store called userDataStore that has only one property called data.

When you click on "Click Me" in the entry page, the data that you typed on text box will be saved in user data store. and it retrieves the data back from the result page.

The issue is that when I refresh the page, I still lost the react states. I guess it's because I don't understand how rehydration works in mobx-persist.

The steps to replicate the issue ~

  1. run the program by using yarn start
  2. enter something in textbox and click on "Click me" (It will redirect to the result page)
  3. you will see what you entered in the result page.
  4. Refresh the page (press F5) - the data will be lost.

Can someone please help me with the steps that I need to do in hydration and rehydration?

Note: I don't want to use any server-side code or isomorphic rendering to sync the states for now. using the session storage might be anti-pattern but I see it fit in my tiny project.

Upvotes: 4

Views: 1991

Answers (0)

Related Questions