What is the best way in react native to fetch data and use it globally without redux? - react-native

Question

I'm building an App without Redux and wonder what is the best way and where is the best place to fetch data from an API and store it globally, so it can be filtered, enhanced and displayed in different views for each case?

Answer 1

You can go for ReactQuery it is a data fetching library, it makes fetching, caching, synchronizing and updating server state easy.
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<FirstComponent />
<SecondComponent />
</QueryClientProvider>
)
}
function FirstComponent() {
// fetch some data
const { isLoading, error, data } = useQuery('myData', fetchData)
if (isLoading) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
</div>
)
}
function SecondComponent() {
const queryClient = useQueryClient()
const invalidateData = () => {
// invalidate data, will trigger a refetch in FirstComponent
queryClient.invalidateQueries('myData')
}
return (
<div>
<button onClick={invalidateData}>
Click me to refetch data !
</button>
</div>
)
}

Answer 2

You can use AsyncStorage, It's like localStorage in Browsers and you can use it as the following code:
yarn add #react-native-async-storage/async-storage
import AsyncStorage from '#react-native-async-storage/async-storage';
// store item
const storeData = async (value) => {
try {
await AsyncStorage.setItem('#storage_Key', value)
} catch (e) {
// saving error
}
}
// get item
const getData = async () => {
try {
const value = await AsyncStorage.getItem('#storage_Key')
if(value !== null) {
// value previously stored
}
} catch(e) {
// error reading value
}
}