反応中のローダー画像を表示するには？

Question

ユーザーがその特定のURLにヒットしたときに読み込みイメージを表示し、APIがデータを正常に取得したときに非表示にしたいとします。 私は、コードを追加すべき場所と、APIレスポンスが成功したときに非表示にする方法について、最初はイメージを表示するようには反応しません。

これはデータを取得するアクション作成者です。

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

これはデータを取得するためのレデューサーです。

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 
    } 
} 
} 

私はこれに新しいですが任意のヘルプはあなたがロード状態を示すために、あなたのReduxの状態のbooleanプロパティを追加することができます

Answer 1

素晴らしいことだそうReduxの反応します。それをisLoadingとしましょう。 FETCH_EVENTSを発送するときにisLoadingをtrueに設定します。 FETCH_EVENTS_FULFILLEDを発送すると、それを偽に設定します。

isLoadingの値は、@connect HOFを使用して反応成分に合格します。値がtrueの場合はローディングインジケータを、falseの場合はコンテンツをレンダリングします。

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.

各ブロックの後に中括弧の中にコードを入れて、がそのブロック内のconstの範囲を制限しています。