Redux saga - le point pour ignorer les requètes de l'API si les données existent déjà dans le magasin redux

Question

Je travaille sur le projet avec l'utilisation de redux-saga et j'ai une question à vous poser. J'ai essayé de trouver une réponse à ma question près de deux jours avec la puissance de Google mais cela n'a pas aidé.

Nous avons une fonction qui est déclenchée par saga sur chaque action FETCH_REQUEST.

export function* fetchData(action) { 
    try { 
    const usersList = (yield select()).usersList; 

    // makes API call only if there is no users found in the current state 
    if(!usersList) { 
     const data = yield call(Api.fetchUser) 
    } 

    yield put({type: "FETCH_SUCCEEDED", usersList}) 
    } catch (error) { 
    yield put({type: "FETCH_FAILED", error}) 
    } 
} 

En cas de succès de l'action FETCH_SUCCEEDED est déclenchée et nous économisons les données reçues à l'état. Mais il me semble que le point de décision "faire ou non l'appel de l'API" n'est pas au bon endroit. L'approche actuelle engendre un certain nombre d'actions qui sont inutiles et ignorées dans les sagas. Dans le cas où d'autres sagas se sont inscrites sur les actions _REQUEST, elles déclenchent d'autres actions inutiles et ainsi de suite. Donc, la question est - Quel est le meilleur endroit pour vérifier si les données doivent être chargées depuis API ou ReduxStore?

Answer 1

Je suppose que vous distribuez FETCH_REQUEST créateur d'actions à partir de votre composant. Ce composant reçoit probablement userList en tant que propriété. Donc, ce composant est le meilleur endroit pour déterminer si l'action FETCH_REQUEST doit être envoyée.

Quelque chose comme ceci:

class MyComponent extends React.Component { 
    componentDidMount() { 
    if (!this.props.userList) { 
     this.props.fetchData(); 
    } 
    } 
} 

... 

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); 

Dans ce cas, vous n'avez pas besoin d'utiliser un sélecteur et la condition supplémentaire dans votre saga.