Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(middleware/persist): Merge storage value with the latest store state #894

Merged
merged 4 commits into from
Apr 7, 2022

Conversation

zerofirework
Copy link
Contributor

@zerofirework zerofirework commented Apr 6, 2022

When using persist middleware, it's possible to mutate the store state in an useEffect callback before hydration creates stateFromStorage. It should merge the storage value with the latest store state instead of the config result since it can be out of date.

To reproduce:

  1. create a storage whose getItem returns the value after a 2sec timeout. The storage is responsible for persisting a partial state. (property a)
  2. add a useEffect to update the state right after render. It adds another property to the store. (property b)

Expected: When the storage value is fetched, it merges storage value with the latest store value.
Actual: When the storage value is fetched, it merges storage value with the initial store value.

Error demo: https://codesandbox.io/s/react-forked-oo16v5?file=/src/App.js
Fixed demo: https://codesandbox.io/s/react-forked-hydp10?file=/src/App.js

When using zustand store with Provider and Context, it's possible to mutate the store state in an useEffect callback before hydration  creates `stateFromStorage`. It should merge the storage value with the latest store state instead of the config result since it can be out of date.
@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 6, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0134814:

Sandbox Source
React Configuration
React Typescript Configuration
React Browserify Configuration
React Snowpack Configuration
React Parcel Configuration
Next.js Configuration
React (forked) PR
React (forked) PR

Copy link
Collaborator

@AnatoleLucet AnatoleLucet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, but unfortunately this change breaks quite a few tests

Copy link
Collaborator

@AnatoleLucet AnatoleLucet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks!

@AnatoleLucet AnatoleLucet requested a review from dai-shi April 6, 2022 19:26
Copy link
Member

@dai-shi dai-shi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your contribution!

@dai-shi dai-shi added middleware/persist This issue is about the persist middleware and removed middleware/persist This issue is about the persist middleware labels Apr 7, 2022
@dai-shi dai-shi changed the title Merge storage value with the latest store state fix(middleware/persist): Merge storage value with the latest store state Apr 7, 2022
@dai-shi dai-shi merged commit 5eaffff into pmndrs:main Apr 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants