Wie lade ich das Loader-Image?

Question

Ich möchte ein Ladebild anzeigen, wenn der Benutzer diese bestimmte URL trifft und ausblenden, wenn die API die Daten erfolgreich abgerufen hat. Ich bin nicht in der Lage, reagieren zu zeigen Bild zunächst, wo ich Code hinzufügen und wie bei Erfolg API Antwort ausblenden sollte.

Dies ist der Aktionsersteller zum Abrufen von Daten.

export const fetchEvents = (requestData) => ({ 
    type: FETCH_EVENTS, 
    payload: axios.get(requestData.url, fetchEventsConfig) 
}) 

Und das ist der Reducer zum Abrufen von Daten.

export default (state = initialState, action) => { 
switch (action.type) { 
case FETCH_EVENTS_FULFILLED: 
    const oldState = Object.assign({}, state) 
    const response = Object.assign({}, action.payload.data) 
    const allResults = oldState.results.concat(response.results) 
    return { 
    ...state, 
    ...response, 
    results: allResults 
    } 
} 
} 

Ich bin redux darauf reagieren, so würde jede mögliche Hilfe groß sein

Answer 1

Sie können eine Boolesche Eigenschaft in Ihrem Redux Zustand fügen Ladezustand anzuzeigen. Nennen wir es isLoading. Setzen Sie isLoading wahr, wenn Sie FETCH_EVENTS versenden. Setzen Sie es falsch, wenn Sie FETCH_EVENTS_FULFILLED versenden.

Übergeben Sie den Wert isLoading an Ihre React-Komponente mit @connect HOF. Rendern Sie einen Ladeindikator, wenn der Wert wahr ist, und den Inhalt, wenn dieser Wert falsch ist.

export default (state = initialState, action) => { 
    switch (action.type) { 
    case FETCH_EVENTS: { 
     return {...state, isLoading: true} 
    } 
    case FETCH_EVENTS_FULFILLED: { 
     const response = action.payload.data 
     const results = [...state.results, ...response.results] 

     return { 
      ...state, 
      ...response, 
      results, 
      isLoading: false 
     } 
    } 
    case FETCH_EVENTS_FAILURE: { 
     return {...state, isLoading: false} 
    } 
    } 
} 

P.S.

Enthalten Code in Klammern nach jeder switch/case Grenzen Bereich Ihrer const in diesem Block.