Reaktif redüksiyonda getirme hatasıyla baş etmenin en iyi yolu nedir?

Question

Ben Müşteriler için bir redüktör, AppToolbar ve bazı diğerleri için diğeri ... sahip

Şimdi müşteri silmek için bir getirme işlemi oluşturmuş söylemek sağlar ve başarısız olursa yapmalıyım Müşteriler indirgeyicide kodu var bazı şeyler, aynı zamanda AppToolbar'da bazı global hataları görüntülemek istiyorum.

Ama Müşteriler ve AppToolbar düşürücüler devletin aynı bölümünü paylaşmayan ve redüktör yeni eylem oluşturmak mümkün değil.

Peki, global hatayı nasıl gösterebilirim? Teşekkür

GÜNCELLEME 1:

kullandığım belirtmeyi unutmayın este devstack

GÜNCELLEME 2: Ben olduğumu çözüm demek zorunda ama doğru olarak Eric'in cevabı işaretlemiş este kullanarak daha fazla Eric ve Dan'ın birleşiminin birleşimidir ... Sadece kodunuzda size en uygun olanı bulmanız yeterlidir ...

Answer 1

"genel hatalar" ın ness'i, addError, removeError vb. eylemlerini dinleyebilen bir errors redüktör oluşturabilirsiniz. Daha sonra, Redux eyalet ağacına state.errors adresinden bağlanarak uygun yerlerde görüntüleyebilirsiniz.

Buna yaklaşabileceğiniz çeşitli yollar vardır, ancak genel fikir, genel hataların/iletilerin kendi redüktörlerini <Clients />/<AppToolbar />'dan tamamen ayrı olarak yaşamaya hak etmeleridir. Tabii ki bu bileşenlerden herhangi birinin errors'a erişmesi gerekiyorsa, errors kodunu ihtiyaç duyulan her yerde bir pervane olarak kullanabilirsiniz.

Güncelleme: Mevcut hatalar varsa Kod Örneği İşte

(sizin üst seviyede <App /> içine "küresel hataları" errors geçmek ve koşullu hale getirilmesi amacıyla olsaydın nasıl görünebileceğini bir örnektir). <App /> bileşeninizi bazı verilere bağlamak için react-redux's connect'u kullanın. senin redüktör sadece hataların bir dizi yönetmek olabilir iken

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

yanıta göre

// 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); 

Ve bildiğim kadarıyla aksiyon yaratıcısı söz konusu olduğunda, bu göndereceğini de (redux-thunk) başarı yetmezliği, ekleme/çıkarma uygun girişler.

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 doğrudur ama hataların artması için ayrı eylemleri kovmak zorunda kalmamasıdır eklemek istiyorum. Alternatif bir yaklaşım, 'un error alanı alanıyla herhangi bir eylemi gerçekleştiren bir redükleyiciye sahip olmaktır. Bu kişisel seçim ve kongre meselesi.

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

Şu anda birkaç belirli hataları için (kullanıcı giriş doğrulaması) alıyorum yaklaşımı benim alt düşürücüler bir istisna sahip olmaktır, yakalama: Redux real-world example dan Örneğin

, hata işleme sahip olduğunu benim kök redüktörümde ve onu eylem nesnesine iliştir. Sonra bir hata için eylem nesneleri inceler redoks-destan var ve bu durumda hata verileri ile devlet ağacını güncelleyin. Yani

: Erik açıklanır olarak

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

Ve sonra devlet ağacına hatayı ekleyerek olduğunu.

Oldukça idareli bir şekilde kullanıyorum, ancak beni yasal olarak redükleyiciye ait olan mantığı kopyalamak zorunda kalmamı sağlıyor (bu nedenle kendini geçersiz bir durumdan koruyabilir).

Answer 4

Axios HTTP istemcisini kullanabilirsiniz. Zaten Interceptors özelliğini uyguladı. O zamana kadar ele alınmadan veya yakalanmadan önce istekleri veya yanıtları engelleyebilirsin.

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

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

Answer 5

yazma özel Ara Katman tüm API ile ilgili hatayı işlemek için. Bu durumda kodunuz daha temiz olacaktır.