More examples of Local Storage Persistence #828

mthines · 2021-01-12T07:52:59Z

Asynchronous / Promise examples of Local Storage Persistence

facebook-github-bot · 2021-01-12T07:53:02Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

mthines · 2021-01-12T09:37:59Z

I've now signed the agreement. 🙂

facebook-github-bot · 2021-01-12T09:58:53Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

drarmstr

Thanks @mthines for helping to improve our documentation!!

drarmstr · 2021-01-20T01:12:54Z

docs/docs/guides/atom-effects.md

@@ -239,6 +241,80 @@ const currentUserIDState = atom({
 });
 ```

+### Asynchronous
+
+If your persisted data needs to be `await`ed, you can either create an `asynchronous` function and call that or use a `promise` in the setSelf function 


promise -> Promise
setSelf -> setSelf()

drarmstr · 2021-01-20T01:15:26Z

docs/docs/guides/atom-effects.md

@@ -239,6 +241,80 @@ const currentUserIDState = atom({
 });
 ```

+### Asynchronous


localStorage is only sync afaik. For async examples let's move out of the "Local Storage" section into another subsection and not reference localStorage.

That's very true. My original code was using localForage which is async, so it made sense in that case, but I converted that part to localForage since the other framework was related to my project and not recoil.

I'm uncertain how to write the documentation for this part then. Any suggestions?

Split into different "##" level sections.

Keep Local Storage Persistence as-is, maybe a mention that it is synchronous in its description.

Add another section for Asynchronous Storage Persistence mentioning maybe AsyncLocalStorage and localForage as examples.

drarmstr · 2021-01-20T01:19:31Z

docs/docs/guides/atom-effects.md

+```jsx
+
+/** If there's a persisted value - set it on load  */
+const loadPersisted = async ({ key, setSelf }) => {


Passing through the setSelf() callback might be confusing. To help with clarity for documentation purposes maybe define this async function in the effect function so it can just use key and setSelf() directly.

With documentation in mind, that makes sense. I'll do that.

drarmstr · 2021-01-20T01:20:30Z

docs/docs/guides/atom-effects.md

+
+/** If there's a persisted value - set it on load  */
+const loadPersisted = async ({ key, setSelf }) => {
+  const savedValue = await localStorage.getItem(key);


See above comment re localStorage being sync

docs/docs/guides/atom-effects.md

drarmstr · 2021-01-20T01:22:06Z

docs/docs/guides/atom-effects.md

+```
+
+
+#### Async Await


This approach isn't limited to just await, but for any async usage of setSelf(), such as with setTimeout().

Maybe the "asynchronously call setSelf()" approach to again be more explicit.

Mention that the default atom value will be used until the deferred setSelf() is called to set the value.

drarmstr · 2021-01-20T23:59:43Z

docs/docs/guides/atom-effects.md

@@ -239,6 +241,80 @@ const currentUserIDState = atom({
 });
 ```

+### Asynchronous


Split into different "##" level sections.

Keep Local Storage Persistence as-is, maybe a mention that it is synchronous in its description.

Add another section for Asynchronous Storage Persistence mentioning maybe AsyncLocalStorage and localForage as examples.

drarmstr · 2021-01-21T00:01:29Z

docs/docs/guides/atom-effects.md

+
+If your persisted data needs to be `await`ed, you can either create an `asynchronous` function and call that or use a `promise` in the setSelf function 
+
+- Using the promise approach you'll be able to wrap the components inside of the `<RecoilRoot/>` with a `<Suspense/>` component to show a fallback state while waiting for `Recoil` to load the persisted values.


Let's not call this the "promise approach", as Promises may be used in other approaches as well. Maybe "Synchronously call setSelf() with a Promise". Wordy, perhaps, but more explicit.

Haha, I prefer it being more readable and explicit.

docs/docs/guides/atom-effects.md

drarmstr · 2021-01-21T00:04:34Z

docs/docs/guides/atom-effects.md

+```
+
+
+#### Async Await


Maybe the "asynchronously call setSelf()" approach to again be more explicit.

Mention that the default atom value will be used until the deferred setSelf() is called to set the value.

docs/docs/guides/atom-effects.md

mthines · 2021-01-27T19:48:36Z

Hey @drarmstr!

Sorry for taking so long getting back to this. I've had a crazy busy week 🏃

I've updated the atom-effects.md based on the changes and suggestions you had.
Let me know if I've missed anything, or somethings still unclear.

drarmstr

Thank you so much for iterating on this! I think this should be the last round.

drarmstr · 2021-02-03T07:22:48Z

docs/docs/guides/atom-effects.md

+```jsx
+const localStorageEffect = key => ({setSelf, onSet}) => {
+  setSelf(
+    localStorage.getItem(key).then((savedValue) => {


localStorage only stores UTF-16. Best to avoid localStorage completely for the async examples. You could also just use localForage for this:

setSelf(localForage.getItem(key).then(savedValue => savedValue != null ? JSON.parse(savedValue) : new DefaultValue() // Abort initialization if no value was stored ));

Sorry, that's my bad.
We already talked about this, so simply a typo.
Thanks!

drarmstr · 2021-02-03T07:24:50Z

docs/docs/guides/atom-effects.md

+
+By synchronously calling `setSelf()` with a `Promise` you'll be able to wrap the components inside of the `<RecoilRoot/>` with a `<Suspense/>` component to show a fallback while waiting for `Recoil` to load the persisted values.
+
+The `<Suspense/>` fallback will be shown until the `setSelf()` function has been called.


"<Suspense> will show a fallback until the Promise provided to setSelf() resolves."

drarmstr · 2021-02-03T07:27:24Z

docs/docs/guides/atom-effects.md

+  };
+
+  // Load the persisted data
+  loadPersisted()


Missing semi-colon.

drarmstr · 2021-02-03T07:38:02Z

docs/docs/guides/atom-effects.md

+
+Using an asynchronous function your `atoms`, `selectors` etc, will use their default value until the deferred `setSelf()` has been called to set the value.
+
+Unlike using a `Promise`, it is not possible to use `<Suspense/>` to show a fallback.


"Unlike initializing to a Promise, the atom's default value will be used initially, so <Suspense> will not show a fallback unless the atom's default is a Promise or async selector."

More examples of Local Storage Persistence

0217fe6

Asynchronous / Promise examples of Local Storage Persistence

mthines mentioned this pull request Jan 12, 2021

onSet() handler in effect not triggered when atom initialized via RecoilRoot initializeState or snapshot #767

Open

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 12, 2021

drarmstr suggested changes Jan 20, 2021

View reviewed changes

drarmstr added the documentation Improvements or additions to documentation label Jan 20, 2021

drarmstr self-assigned this Jan 20, 2021

drarmstr mentioned this pull request Jan 20, 2021

[react-native] atomEffect not waiting for values to load from AsyncStorage #756

Closed

drarmstr reviewed Jan 21, 2021

View reviewed changes

mthines added 2 commits January 27, 2021 20:38

Update atom-effects.md

5df5baa

Update atom-effects.md

54586f5

mthines requested a review from drarmstr January 27, 2021 19:48

drarmstr suggested changes Feb 3, 2021

View reviewed changes

Updated docs based on PR comment

dd6a22d

drarmstr merged commit fc47eff into facebookexperimental:docs Feb 3, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

More examples of Local Storage Persistence #828

More examples of Local Storage Persistence #828

mthines commented Jan 12, 2021 •

edited

facebook-github-bot commented Jan 12, 2021

mthines commented Jan 12, 2021

facebook-github-bot commented Jan 12, 2021

drarmstr left a comment

drarmstr Jan 20, 2021

drarmstr Jan 20, 2021

mthines Jan 20, 2021

drarmstr Jan 20, 2021

drarmstr Jan 20, 2021

mthines Jan 20, 2021

drarmstr Jan 20, 2021

drarmstr Jan 20, 2021

drarmstr Jan 21, 2021

drarmstr Jan 20, 2021

drarmstr Jan 21, 2021

mthines Jan 27, 2021

drarmstr Jan 21, 2021

mthines commented Jan 27, 2021

drarmstr left a comment

drarmstr Feb 3, 2021

mthines Feb 3, 2021

mthines Feb 3, 2021

drarmstr Feb 3, 2021

mthines Feb 3, 2021

drarmstr Feb 3, 2021

mthines Feb 3, 2021

drarmstr Feb 3, 2021

mthines Feb 3, 2021


		If your persisted data needs to be `await`ed, you can either create an `asynchronous` function and call that or use a `promise` in the setSelf function

		- Using the promise approach you'll be able to wrap the components inside of the `<RecoilRoot/>` with a `<Suspense/>` component to show a fallback state while waiting for `Recoil` to load the persisted values.


		By synchronously calling `setSelf()` with a `Promise` you'll be able to wrap the components inside of the `<RecoilRoot/>` with a `<Suspense/>` component to show a fallback while waiting for `Recoil` to load the persisted values.

		The `<Suspense/>` fallback will be shown until the `setSelf()` function has been called.


		Using an asynchronous function your `atoms`, `selectors` etc, will use their default value until the deferred `setSelf()` has been called to set the value.

		Unlike using a `Promise`, it is not possible to use `<Suspense/>` to show a fallback.

More examples of Local Storage Persistence #828

More examples of Local Storage Persistence #828

Conversation

mthines commented Jan 12, 2021 • edited

facebook-github-bot commented Jan 12, 2021

mthines commented Jan 12, 2021

facebook-github-bot commented Jan 12, 2021

drarmstr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mthines commented Jan 27, 2021

drarmstr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mthines commented Jan 12, 2021 •

edited