處理反應堆中的提取錯誤的最佳方法是什麼？

Question

我有一個客戶端減速器，另外一個用於AppToolbar和其他一些人...

現在讓我們說，我創建了一個獲取操作刪除客戶端，如果失敗，我在客戶端減速器代碼應該做的一些東西，但我也想在AppToolbar中顯示一些全局錯誤。

但客戶端和AppToolbar減速器不共享狀態的相同部分，我無法在減速器中創建新的操作。

那麼我想如何顯示全局錯誤？由於

更新1：

我忘了提，我使用este devstack

更新2： 標誌着我Eric的回答是正確的，但我不得不說，解決方案，我在este中使用更像是Eric和Dan的答案的組合... 您只需要找到適合您的代碼中的最佳代碼即可...

Answer 1

如果您想要共享除了「全局錯誤」，你可以創建一個減速器，它可以監聽addError，removeError等等動作。然後，您可以在state.errors處掛接到您的Redux狀態樹，並在適當的位置顯示它們。

有很多方法可以解決這個問題，但總體思路是，全局錯誤/消息將有利於他們自己的reducer與<Clients />/<AppToolbar />完全分離。當然，如果這些組件中的任何一個都需要訪問errors，則可以將errors傳遞給它們作爲任何需要的支柱。

更新：代碼示例

這裏是它可能是什麼樣子，如果你是到「全局錯誤」 errors傳遞到您的頂級<App />和有條件地呈現它一個例子（如果存在錯誤）。使用react-redux's connect將您的<App />組件連接到某些數據。

// App.js 
// Display "global errors" when they are present 
function App({errors}) { 
    return (
    <div> 
     {errors && 
     <UserErrors errors={errors} /> 
     } 
     <AppToolbar /> 
     <Clients /> 
    </div> 
) 
} 

// Hook up App to be a container (react-redux) 
export default connect(
    state => ({ 
    errors: state.errors, 
    }) 
)(App); 

並儘可能的行動創造者而言，這將派遣（redux-thunk）成功失敗根據應答

export function fetchSomeResources() { 
    return dispatch => { 
    // Async action is starting... 
    dispatch({type: FETCH_RESOURCES}); 

    someHttpClient.get('/resources') 

     // Async action succeeded... 
     .then(res => { 
     dispatch({type: FETCH_RESOURCES_SUCCESS, data: res.body}); 
     }) 

     // Async action failed... 
     .catch(err => { 
     // Dispatch specific "some resources failed" if needed... 
     dispatch({type: FETCH_RESOURCES_FAIL}); 

     // Dispatch the generic "global errors" action 
     // This is what makes its way into state.errors 
     dispatch({type: ADD_ERROR, error: err}); 
     }); 
    }; 
} 

當你減速機可以簡單的管理錯誤的陣列，添加/刪除條目適當。

function errors(state = [], action) { 
    switch (action.type) { 

    case ADD_ERROR: 
     return state.concat([action.error]); 

    case REMOVE_ERROR: 
     return state.filter((error, i) => i !== action.index); 

    default: 
     return state; 
    } 
} 

Answer 2

Erik’s answer是正確的，但我想補充一點，你不必火單獨的操作添加錯誤。另一種方法是使用處理error字段的減速器。這是個人選擇和慣例的問題。

例如，從Redux real-world example有錯誤處理：

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

Answer 3

我目前正在幾個特定的​​錯誤（用戶輸入驗證）的方法是讓我的子減速器拋出一個異常，捕獲它在我的根減速器中，並將其附加到操作對象。然後我有一個redux-saga，它檢查動作對象是否有錯誤，並在這種情況下用錯誤數據更新狀態樹。

所以：

function rootReducer(state, action) { 
    try { 
    // sub-reducer(s) 
    state = someOtherReducer(state,action); 
    } catch (e) { 
    action.error = e; 
    } 
    return state; 
} 

// and then in the saga, registered to take every action: 
function *errorHandler(action) { 
    if (action.error) { 
    yield put(errorActionCreator(error)); 
    } 
} 

，然後加入錯誤的州樹是埃裏克描述。

我非常謹慎地使用它，但它使我無需複製合法屬於reducer的邏輯（因此它可以保護自己免受無效狀態的影響）。

Answer 4

您可以使用axios HTTP客戶端。它已經實現了攔截器功能。您可以在請求或響應被他們處理或捕獲之前攔截請求或響應。

https://github.com/mzabriskie/axios#interceptors

// Add a request interceptor 
 
axios.interceptors.request.use(function (config) { 
 
    // Do something before request is sent 
 
    return config; 
 
    }, function (error) { 
 
    // Do something with request error 
 
    return Promise.reject(error); 
 
    }); 
 

 
// Add a response interceptor 
 
axios.interceptors.response.use(function (response) { 
 
    // Do something with response data 
 
    return response; 
 
    }, function (error) { 
 
    // Do something with response error 
 
    return Promise.reject(error); 
 
    });

Answer 5

寫定製的中間件來處理所有的API相關的錯誤。在這種情況下，您的代碼將會更清晰。

failure/ error actin type ACTION_ERROR 

    export default (state) => (next) => (action) => { 

     if(ACTION_ERROR.contains('_ERROR')){ 

     // fire error action 
     store.dispatch(serviceError()); 

     } 
}