2015-10-15 27 views
29

Voglio mostrare diverse barre di notifica per le risposte di successo/errore, mi passano due callback a un'azione asincrona redux nella mia reagire componente in questo modo:è considerata buona pratica passare il callBack per ridire azione asincrona?

<Button 
    onClick={e => this.props.actions.asyncAction(item, this.showSuccessBar, this.showErrorBar)} 
/> 

dove asyncAction assomiglia a questo:

export function asyncAction(item, successCallback, errorCallback) { 
    return (dispatch, getState) => { 
    dispatch(requestItem(item)); 
    return fetch("api.some_url/items/item") 
     .then(response => response.json()) 
     .then(json => { 
     if (json.success) { 
      dispatch(receivePostsSuccess(reddit, json)); 
      successCallback(); 
     } else { 
      dispatch(receivePostsFail(reddit, json)); 
      errorCallback(); 
     } 
     }); 
    } 
    }; 
} 

Questo è considerato contro il modello? in altre parole, le barre di notifica dovrebbero essere aperte in base al cambio di stato anziché a callBacks?

risposta

67

Il modello è di per sé fine. Se questa è una notifica locale al componente, sentiti libero di evitare di collegarlo tramite Redux.

Tali callback sono completamente inutili perché si sta già restituendo la promessa. Aspetta solo il suo completamento.

this.props.dispatch(asyncAction(item)).then(onSuccess, onFailure); 

Tuttavia, se si dispone di molti componenti con tali barre di notifica, è meglio avere un riduttore di mantenere la notifica corrente e di reagire alle azioni.

+1

Grazie mille, questo ha funzionato abbastanza bene. Apprezzo anche il tuo ottimo lavoro su redux e devtools, ecc! Li abbiamo amati :) Ho anche una domanda correlata http://stackoverflow.com/questions/33237712/how-to-undo-redux-async-action-multiple-steps-back-in-the-state non sono sicuro se sono nella giusta direzione. – naifen

+0

@ Dan-Abramov Follow-up: se la spedizione restituisce una promessa, quando si risolve? Nell'esempio sopra, ad esempio, asyncAction restituisce una funzione (come per thunk middleware) che sembra restituire una catena di promesse (in realtà non aveva visto prima questi ritorni, ma assumendo che fosse kosher?); quindi se concatenando in cima alla spedizione, a che punto si risolve quella promessa? –

+1

@RubenMartinezJr. Non capisco la domanda. Il middleware Thunk farà in modo che il valore di ritorno di thunk (una Promessa) venga restituito dalla stessa "spedizione". Si risolve ogni volta che decide l'azione e dipende da come è stata creata questa Promessa. questo aiuta? Forse puoi creare una domanda separata, se no. –

0

Questo sarebbe il flusso di dati bidirezionale, che interrompe la prima regola del flusso.

+7

Dan Abramov Ha detto che va bene, e questo significa che va bene: D –

2

Suggerisco di avere un negozio separato denominato smth come NotificationStore e creare un'infrastruttura di notifiche intorno ad esso. Puoi usare le callback, ma in futuro è un grosso problema.

Problemi correlati