AxiosとReduxでエラー状態を追加する

Question

私のアプリケーションにどのようにしたいかを動作させるのに問題があります。私はReactとReduxにはかなり新しいので、私に同行してください。

今すぐ私はthis.props.fetchData('usernamehere')と呼んでユーザーに関するデータを取得できます。成功するとReactコンポーネントの更新に使用するthis.props.profileが更新されます。この問題は、エラーを処理することです。

私はFETCH_DATA_ERROR減速を追加することによって、これを処理しようとしましたが、私がいる問題は、それは404のそれはまだちょうどthis.props.errorを更新するのではなく、空のオブジェクトでthis.props.profileを置き換えたとき。理想的には、新しいプロファイルが見つかるまで現在のプロファイルを保存し、更新して入力したユーザー名でエラーが何であるかをユーザーに表示したいと考えています。this.props.error誰もが、彼らは非常に高く評価されるだろう任意の提案を持っている場合

import { FETCH_DATA, FETCH_DATA_ERROR } from '../actions/types'; 

const INITIAL_STATE = { profile: null, error: null } 

export default function(state = INITIAL_STATE, action) { 
    switch(action.type) { 
    case FETCH_DATA: 
     return { ...state, profile: action.payload.data }; 

    case FETCH_DATA_ERROR: 
     return { ...state, error: action.payload }; 

    default: 
    return state; 
    } 
} 

：

import axios from 'axios'; 
import { FETCH_DATA, FETCH_DATA_ERROR } from './types'; 

export const ROOT_URL = 'https://api.github.com/users' 

export function fetchData(user) { 
    const request = axios.get(`${ROOT_URL}/${user}`) 
    .catch(function (error) { 
    return { 
     type: FETCH_DATA_ERROR, 
     payload: error 
    } 
    }); 

    return { 
    type: FETCH_DATA, 
    payload: request 
    } 
} 

と減速：

は今の私は、次のアクションの作成者を設定しています。私は正しい道にいるように感じるが、どこが間違っているのか分からないようだ。

Answer 1

これまでのところ、リクエストの開始を示すアクション（FETCH_DATA）とリクエストが失敗したことを示すアクション（FETCH_DATA_ERROR）があります。典型的には、これは、要求が肯定応答（おそらくFETCH_DATA_SUCCESS）をもたらしたことを示す、3番目のものをモデルにしています。

あなたはそれを最初に派遣のみFETCH_DATAようhttps://github.com/gaearon/redux-thunkようなものを使用して、アクションの作成者を書き換える必要があるでしょうし、その後axios.getのその後/キャッチ・ハンドラでは、あなたは成功または失敗のアクションをディスパッチ：

import { FETCH_DATA, FETCH_DATA_SUCCESS, FETCH_DATA_ERROR } from '../actions/types'; 

// ASYNC ACTION CREATOR 

export const fetchData = user => (dispatch) => { 
    dispatch({ 
     type: FETCH_DATA 
    }); 

    return axios.get(`${ROOT_URL}/${user}`) 
     .then(response => dispatch({ 
      type: FETCH_DATA_SUCCESS, 
      payload: response 
     })) 
     .catch(error => dispatch({ 
      type: FETCH_DATA_ERROR, 
      payload: error 
     })); 
}; 


// REDUCER 

const INITIAL_STATE = { 
    profile: null, 
    error: null 
}; 

export default function(state = INITIAL_STATE, action) { 
    switch(action.type) { 
     // Start of request - discard old data and reset old errors. 
     case FETCH_DATA: 
      return { 
      // It's important to set all of these to properly model the request lifecycle 
      // and avoid race conditions etc. 
      profile: null, 
      error: null 
     }; 

     // End of request - save profile and signal that there was no error. 
     case FETCH_DATA_SUCCESS: 
      return { 
       profile: action.payload.data, 
       error: null 
      }; 

     // End of request - discard old profile and save error, to display it to the user for example. 
     case FETCH_DATA_ERROR: 
      return { 
       profile: null, 
       error: action.payload 
      }; 

     default: 
      return state; 
    } 
}