réagissent - faire un appel ajax une seule fois par composant

Question

J'ai mis mes itinéraires comme suit:

<Router> 
    <Switch> 
     <Route exact path="/" component={Home} /> 
     <Route path="/about" component={About} /> 
     <Route path="/contact" component={Contact} /> 
    </Switch> 
</Router> 

Sur le composant Accueil Je veux faire un appel ajax seulement le temps de poing quand est monté.

export default class Home extends Component { 
    componentDidMount(){ 
     //make ajax call only once. Do some stuff on .then() 
    } 
} 

Le problème est que si les utilisateurs commutateurs les pages entre la maison et propos, le compoment Home sera de nouveau rendre tout, donc mon appel ajax sera déclenché à nouveau.

Comment puis-je résoudre ce problème? Dois-je stocker la première extraction de données dans un magasin redux, puis utiliser l'instruction if ou y a-t-il une meilleure approche?

Answer 1

Si vous voulez opter pour Redux, vous devez envoyer une action pour récupérer les données si elles ne sont pas encore là.

class Home extends Component { 
    componentDidMount(){ 
     if (!this.props.homeContent) { 
      this.props.dispatch(fetchHomeContent()); 
     } 
    } 
} 

// Map redux store to your component props 
const mapStateToProps = (state) => { 
    return { 
     'homeContent': state.homeContent 
    } 
} 

// Redux 'connect' function, to subscribe your component for state changes. 
export default connect(mapStateToProps)(Home); 

action Vous est async, vous devez donc utiliser le middleware Redux-thunk, s'il vous plaît consulter la doc pour sa configuration.

Vos actions:

function fetchHomeContent(subreddit) { 
    return dispatch => { 
     return fetch(`https://your-domain/pathname`) 
      .then(response => response.json()) 
      .then(json => dispatch(receiveData(json))) 
    } 
} 

function receiveData(json) { 
    return { 
     type: 'receive', 
     data 
    } 
} 

Et votre réducteur:

switch (action.type) { 
    case 'receive':   
     return Object.assign({}, state, { 
      'homeContent': action.data 
     }) 
    default: 
     return state 
} 

Ceci est juste pour donner à votre idée de votre configuration générale, mais vous devez toujours câbler (configuration de votre magasin, root réducteur et etc), la meilleure façon est de suivre Redux docs/tutorial.

Cette solution serait utile si vous avez besoin d'une mise en cache similaire pour d'autres parties de votre application. Dans le cas où c'est un gros frais pour vous, vous pouvez enregistrer dans localStorage, comme vous l'avez mentionné ci-dessus. Et lisez-le sur componentDidMount.