Skip to content

Commit

Permalink
fix: add missing code removal and update to latest ignite boilerplate…
Browse files Browse the repository at this point in the history
… code (#181)
  • Loading branch information
ecroce authored Nov 15, 2024
1 parent d4f8203 commit f6bcc74
Showing 1 changed file with 23 additions and 13 deletions.
36 changes: 23 additions & 13 deletions docs/recipes/Zustand.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export interface AuthenticationStoreSnapshot extends SnapshotOut<typeof Authenti

</details>

MobX-State-Tree models declare the data type, initial values, derived values, and actions all in one.
MobX-State-Tree models declare the data type, initial values, derived values, and actions all in one.
Zustand takes a "barebones" approach and defines a store as a basic state object with data and actions co-located.

Create a new file `app/store/AuthenticationStore.ts` and convert the model to Zustand to look like this:
Expand Down Expand Up @@ -535,7 +535,19 @@ const episodeStore = useEpisodeStore();
```

```diff
<Toggle
useEffect(() => {
;(async function load() {
setIsLoading(true)
await episodeStore.fetchEpisodes()
setIsLoading(false)
})()
-- }, [episodeStore])
++ }, [])

```

```diff
<Switch
value={episodeStore.favoritesOnly}
onValueChange={() =>
-- episodeStore.setProp("favoritesOnly", !episodeStore.favoritesOnly)
Expand All @@ -554,7 +566,7 @@ const parsedTitleAndSubtitle = getParsedTitleAndSubtitle(episode);

```diff
<Text
style={$metadataText}
style={themed($metadataText)}
size="xxs"
--accessibilityLabel={episode.datePublished.accessibilityLabel}
++accessibilityLabel={datePublished.accessibilityLabel}
Expand Down Expand Up @@ -647,21 +659,19 @@ We added the `persist` middleware and created `_hasHydrated` property & action t

...

const [areFontsLoaded] = useFonts(customFontsToLoad)
const [areFontsLoaded, fontLoadError] = useFonts(customFontsToLoad)

-const { rehydrated } = useInitialRootStore(() => {
- setTimeout(hideSplashScreen, 500)
-})

-useEffect(() => {
- hideSplashScreen()
-}, [])

+const hasHydrated = useStore((state) => state._hasHydrated)
+const rehydrated = useStore((state) => state._hasHydrated)
+useEffect(() => {
+ if (hasHydrated) {
+ if (rehydrated) {
+ setTimeout(hideSplashScreen, 500)
+ }
+}, [hasHydrated])

-if (!isNavigationStateRestored || !areFontsLoaded) return null
+if (!hasHydrated || !isNavigationStateRestored || !areFontsLoaded) return null
+}, [rehydrated])

```
Expand Down

0 comments on commit f6bcc74

Please sign in to comment.