Comment exprimer une action REQUEST/START via redux-actions?

Question

Je veux utiliser redux-actions pour simplifier mon code de réaction-redux, mais j'ai une question:

Dites que j'ai l'action "charger", qui récupère certains sujets de la télécommande. de sorte que le code serait:

const load = createActions('LOAD'); 

export function fetch() { 
    return (dispatch, getState) => { 
    dispatch(fetchTopicsRequest()); // <- here is my question. 
    return network 
     .request('/topics?' + qs.stringify(getState().topics.filter.options)) 
     .then(network.handleResponse) 
     .then(result => dispatch(load(result)))  // <- here I got the topics in the payload 
     .catch(error => dispatch(load(error)));  // <- here I got the errors in the payload, in the reducer I check on the "error" field to see if the request successed. 
    }; 
} 

Je pense qu'il est bon d'avoir le résultat et a été envoyé avec une seule action erreur. mais qu'en est-il du statut "Demandant" avec la même action? comme le code ci-dessus, je ne l'ai pas compris, donc je dois faire une autre action "fetchTopicsRequest()", cela rend le code entier si bizarre. Dès la disscusion précoce, j'ai remarqué qu'il y avait un champ "status", cela pourrait être utile dans un tel cas. où est-il allé? ou j'ai juste manqué une meilleure idée?

Merci

Answer 1

Tout d'abord, je voudrais corriger votre compréhension de ce que vous appelez comme des actions. Dans votre cas, la fonction fetch() est un créateur d'actions capable de répartir les actions, load(result) et load(error) sont les actions réellement envoyées.

Maintenant, comme vous cherchez une meilleure implémentation de votre action fetchTopicsRequest(), je vous suggère d'utiliser la manière conventionnelle d'écrire une action. Dans votre cas, ce serait quelque chose comme ceci:

dispatch({type: 'FETCHING_TOPICS'}); 

vous pouvez maintenant saisir cette action dans votre réducteur et faire tout en votre topics sont FETCH.

MISE À JOUR:

Pour gérer le pending cas, vous pouvez utiliser la composition d'action et réducteur. Une fois que les FETCHING_TOPICS actions est distribué ensuite dans votre réducteur, vous pouvez marquer pending comme true et une fois que la response est reçue alors vous pouvez changer pending à false comme ceci:

function reducer(state={pending: null}, action) { 
    switch(action.type) { 
    case 'FETCHING_TOPICS': 
     return {...state, pending: true}; 
     break; 
    case 'FETCHED_TOPICS': 
     return {...state, pending: false, //payload if any}; 
     break; 
    case 'FETCHING_ERR': 
     return {...state, pending: false, //payload if any}; 
     break; 
    } 
}