Trying to keep context state on user device

Author: Thiago Lopes

package.json

@@ -13,6 +13,7 @@
  "@expo-google-fonts/poppins": "^0.2.3",
  "@expo/metro-config": "^0.17.4",
  "@expo/vector-icons": "^14.0.0",
+ "@react-native-async-storage/async-storage": "1.21.0",
  "@react-navigation/bottom-tabs": "^6.5.12",
  "@react-navigation/drawer": "^6.6.11",
  "@react-navigation/material-bottom-tabs": "^6.2.19",

src/context/AppReducer.ts

@@ -14,7 +14,8 @@ export enum ActionTypes {
  INCREASE_QTY = 'INCREASE_QTY',
  DECREASE_QTY = 'DECREASE_QTY',
  DELETE_ALL_FROM_CART = 'DELETE_ALL_FROM_CART',
- DELETE_ALL_FROM_FAVORITES = 'DELETE_ALL_FROM_FAVORITES'
+ DELETE_ALL_FROM_FAVORITES = 'DELETE_ALL_FROM_FAVORITES',
+ RESTORE_STATE = 'RESTORE_STATE'
 }
 
 type Action =
@@ -25,6 +26,7 @@ type Action =
  | { type: ActionTypes.DECREASE_QTY; payload: { id: string; color: string } }
  | { type: ActionTypes.DELETE_ALL_FROM_CART }
  | { type: ActionTypes.DELETE_ALL_FROM_FAVORITES }
+ | { type: ActionTypes.RESTORE_STATE; payload: AppState }
 
 export const AppReducer = (
  state: AppState = initialState,

src/context/GlobalState.tsx

@@ -1,4 +1,5 @@
-import { createContext, useReducer, ReactNode, Dispatch } from 'react'
+import { createContext, useReducer, ReactNode, useEffect } from 'react'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 import { AppReducer, ActionTypes } from '@Context/AppReducer'
 import { Product, Order, AppState, GlobalStateContextProps } from '@Data/types'
 import allProducts from '@Data/data'
@@ -33,6 +34,36 @@ interface GlobalStateProps {
 export const GlobalProvider = ({ children }: GlobalStateProps) => {
  const [state, dispatch] = useReducer(AppReducer, initialState)
 
+ useEffect(() => {
+ const loadState = async () => {
+ try {
+ const storedState = await AsyncStorage.getItem('appState')
+ if (storedState !== null) {
+ dispatch({
+ type: ActionTypes.RESTORE_STATE,
+ payload: JSON.parse(storedState)
+ })
+ }
+ } catch (error) {
+ console.error('Error loading state from AsyncStorage:', error)
+ }
+ }
+
+ loadState()
+ }, [])
+
+ useEffect(() => {
+ const saveState = async () => {
+ try {
+ await AsyncStorage.setItem('appState', JSON.stringify(state))
+ } catch (error) {
+ console.error('Error saving state to AsyncStorage:', error)
+ }
+ }
+
+ saveState()
+ }, [state])
+
  const isOnFavorite = (id: string) => {
  return state.favorites.some((product) => product.id === id)
  }

yarn.lock

@@ -1747,6 +1747,13 @@
  mkdirp "^1.0.4"
  rimraf "^3.0.2"
 
+"@react-native-async-storage/async-storage@1.21.0":
+ version "1.21.0"
+ resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.21.0.tgz#d7e370028e228ab84637016ceeb495878b7a44c8"
+ integrity sha512-JL0w36KuFHFCvnbOXRekqVAUplmOyT/OuCQkogo6X98MtpSaJOKEAeZnYO8JB0U/RIEixZaGI5px73YbRm/oag==
+ dependencies:
+ merge-options "^3.0.4"
+
 "@react-native-community/cli-clean@12.3.6":
  version "12.3.6"
  resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-12.3.6.tgz#e8a7910bebc97266fd5068649013a03958021fc4"
@@ -4221,6 +4228,11 @@ is-path-inside@^3.0.2:
  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-plain-obj@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+ integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.4:
  version "2.0.4"
  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
@@ -4731,6 +4743,13 @@ memory-cache@~0.2.0:
  resolved "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz"
  integrity sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==
 
+merge-options@^3.0.4:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
+ integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
+ dependencies:
+ is-plain-obj "^2.1.0"
+
 merge-stream@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"