search

reduxjs / redux-essentials-example-app

Example app for the Redux Essentials tutorial
https://redux.js.org/tutorials/essentials/part-1-overview-concepts
304 stars 811 forks source link

[Bug] Browser reload drops state updates #65

Closed SomervilleTom closed 9 months ago

SomervilleTom commented 1 year ago

This issue appears to be similar to Issue #64.

I'm using the tutorial-steps branch of the tutorial, and I exercised the app immediately after adding SinglePostPage.

I had to make several modifications to 'package.json' in order to make the app run, as follows:

  1. Update the msw to require "^0.38.0"
  2. Update react-scripts to require "^5"
  3. Run "git reset --hard 4ee39fb" in the project directory.
  4. After 'yarn install, copy a patched 'getHttpsConfig.js' intoreact-scripts/config/`
  5. After yarn install, run 'npx msw init public' from the project directory

With these changes in place, I think performed the tutorial steps to:

  1. Add SinglePostPage
  2. Update App.js as per the tutorial
  3. Update PostsList.js as per the tutorial
  4. Update Navbar.js as per the tutorial
  5. Run the tutorial and add a post using "Save Page"

The third post appears in the app:

single_post_page_before_reload

I then clicked reload in the (Chrome) browser. This causes the added post to be dropped:

single_post_page_after_reload

I see similar behavior in `PostsList'. Immediately after clicking "Save Post", I see the added post:

posts_page_before_reload

After reload, the added post disappears:

posts_page_after_reload

I used breakpoints in the dispatch call to postAdded in SinglePostForm and postsSlice, and it appears that the value of state -- presumably coming from Provider -- is reset to its initial state after a refresh.

Sadly, I don't have the expertise to determine whether this is a bug in the tutorial, in @reduxjs/toolkit, or in redux itself.

I appreciate any guidance or workaround for ensuring that the app I'm building will behave as expected after a reload.

markerikson commented 9 months ago

Hi! Sorry for the very late response. I'm finally doing some updates on the example app and saw this.

This is expected behavior. A Redux store is like any other JS variable - it only exists for the lifetime of this page. When you reload the page, an entire new JS environment is created from scratch, including a new Redux store.

This example app is configured to generate some initial fake data, but it doesn't do anything to persist items you might have added while using the example app.

So yes, reloading the page will throw away all of the new items you added - that's fully expected.