Comment stocker les données lors de la récupération de l'API

Je crée une application qui récupère des données d'une URL et l'affiche. Je suis un débutant et donc je n'utilise pas Redux ou autre pour le moment.

J'ai réussi à récupérer les données et à l'afficher sur ma demande, mais j'aimerais utiliser le stockage local du téléphone. J'ai vu les exemples d'asyncstorage sur la documentation du site Web de l'Expo, mais je ne sais pas comment les adapter à mon code. De plus, dois-je afficher des données de stockage locales uniquement lorsqu'il n'y a pas de connexion Internet? Ou dois-je toujours avoir toujours à les afficher? P>

import React, {Component} from 'react';
import {ScrollView, View, FlatList, Image, ActivityIndicator, AsyncStorage} from 'react-native';
import axios from "axios";
import {ListItem} from "react-native-elements";
import {createAppContainer, createStackNavigator} from "react-navigation";
import AppConfig from "../../AppConfig";
import Keys from "../../data/Constants/Storage";
import PronosticsDetailsScreen from "../../screens/PronosticsDetailsScreen";

class MontanteTab extends Component {

    state = {
        errors: null,
        isLoading: true,
        pronostics: [],
    };

    async componentDidMount() {
        const isConnected = true;

        if (isConnected) {
            await this.loadPronostics();
        }

        try {
            this.setState({pronostics: JSON.parse(await AsyncStorage.getItem(Keys.pronosticsMontante))});
        } catch (error) {
            console.log(error);
        }
    }

    loadPronostics() {
        this.setState({isLoading: true, error: null});

        return axios.get(AppConfig.apiUrl + 'montante').then(async response => {
            await AsyncStorage.setItem(Keys.pronosticsMontante, JSON.stringify(this.state.pronostics));
            this.setState({isLoading: false});
        }).catch(error => {
            this.setState({isLoading: false, error: error.response});
            console.log(error);
        });
    }

    render() {
        if (this.state.isLoading === true) {
            return (
                <View style={{flex: 1, padding: 20}}>
                    <ActivityIndicator/>
                </View>
            )
        }

        return (
            <View>
                <ScrollView>
                    <View>
                        <FlatList
                            data={this.state.pronostics}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={({item}) => (
                                <ListItem
                                    key={item.id}
                                    roundAvatar
                                    badge={{
                                        value: item.statut,
                                        textStyle: {color: '#fff'},
                                        containerStyle: {marginRight: 0, backgroundColor: item.couleur}
                                    }}
                                    avatar={<Image
                                        source={{uri: AppConfig.imagesPronosticsUrl + item.image}}
                                        style={{borderRadius: 50, height: 50, width: 50}}/>}
                                    title={item.competition}
                                    subtitle={item.equipe_domicile + ' - ' + item.equipe_exterieur}
                                    onPress={() => this.props.navigation.navigate('PronosticsDetails', {
                                        item,
                                    })}
                                />
                            )}
                        />
                    </View>
                </ScrollView>
            </View>
        );
    }
}