Come coordinare i messaggi di errore del server tra Flux e React?

Question

Ho imparato React e Flux negli ultimi mesi, e una cosa che non ho ancora affrontato è la visualizzazione di messaggi di errore agli utenti. In particolare, i messaggi di errore che si verificano a seguito di una richiesta http ajax all'interno di un metodo di creazione di azioni di flusso.

Un semplice esempio è l'accesso dell'utente: se il segno in una richiesta Ajax non riesce a causa di una password errata, il server risponde con l'errore. In quel momento, all'interno del mio metodo di creazione di azioni di flusso, la mia unica opzione è quella di inviare un'azione contenente le informazioni di errore, giusto?

Posso inviare le informazioni di errore e mantenere questo errore in un negozio. Non sono sicuro di quale sia il modo migliore per legare determinati errori a determinati componenti. Diciamo che la mia struttura dei componenti reattiva sta visualizzando più componenti che riconoscono gli errori, ma si verifica un errore durante il tentativo di autenticazione dell'utente sul lato server e deve essere visualizzato su tale modulo di accesso.

Esiste un buon modello o una convenzione per archiviare gli errori e sapere a quale componente sono destinati? Esiste un modo programmatico per determinare ciò, invece di passare un identificatore ad ogni funzione di azione che identifica il componente che il creatore dell'azione è chiamato, ecc.?

Answer 1

Poiché hai contrassegnato la domanda con il tag Redux, presumo che tu usi Redux.
In tal caso, questo real-world example mostra la gestione degli errori.

C'è

un reducer that reacts to any action with error field:

// Updates error message to notify about the failed fetches. 
function errorMessage(state = null, action) { 
    const { type, error } = action; 

    if (type === ActionTypes.RESET_ERROR_MESSAGE) { 
    return null; 
    } else if (error) { 
    return action.error; 
    } 

    return state; 
} 

L'API personalizzato middleware puts any error message into error field on the action:

return callApi(endpoint, schema).then(
    response => next(actionWith({ 
     response, 
     type: successType 
    })), 
    error => next(actionWith({ 
     type: failureType, 
     error: error.message || 'Something bad happened' 
    })) 
); 

Infine, la componente reads the error message from Redux store:

function mapStateToProps(state) { 
    return { 
    errorMessage: state.errorMessage 
    }; 
} 

Come potete vedere, questo non è un qualsiasi diverso da come gestiresti la visualizzazione dei dati recuperati.

Answer 2

L'idea di conservare le informazioni sugli errori in un negozio va bene (probabilmente un ErrorStore). Ma il negozio non ha bisogno di conoscere il componente interessato a un particolare errore. Invece, lo ErrorStore deve emettere un evento CHANGE. Quando si emette quell'evento, è possibile aggiungere un argomento aggiuntivo, ovvero il tipo di errore (che presumibilmente il negozio riceve dal creatore dell'azione).

Ora, qualsiasi componente può ascoltare il ErrorStore e verificare il tipo di errore (che otterrà come argomento). I componenti possono quindi sapere quale tipo di errore è stato generato e decidere se sono interessati o meno.