Redux

Question

'u kullanarak bir diğerinden daha önce çağrılacak bir eylemi gerçekleştirin Bunu bir uygulama için yaptım ve bunun bir hatalı uygulama veya tamamlanmış olup olmadığını bilmek istiyorum. Yani akışıdır

switch (action.type) { 
    case 'PRE_FETCH_ACTION': 
    return Object.assign({}, state, {value: action.value, isAllowed: true}) 
    case 'FETCHED_SUCCESS': 
    if (!state.isAllowed) { 
     throw Error('You did not dispatch PRE_FETCH_ACTION before fetching!'); 
    } 
    return Object.assign({}, state, {data: action.data, isAllowed: false}) 
} 

:

• Ben harici API
• hizmeti için çağrı getirme yapmak
• PRE_FETCH_ACTION sevk ı iki eylemler için dinleme bir redüktör var diyelim biri d almaya çalışırsa tepki döner, o FETCHED_SUCCESS

gönderir önce PRE_FETCH_ACTION'u göndermeden, kod bir hata atar.

Tamam, işte bu iyi çalışıyor. Benim endişem, dediğim gibi, bu kötü bir kalıp olarak kabul edilirse. Neden böyle düşünüyorum? isAllowed parça durumu, redüktöre çok iç olduğu ve herhangi bir bileşen render yöntemini etkilemediği için.

Answer 1

Uygulama durumunuzda bu tür "teknik" bayrakların olması iyi bir şey. Durumunuzda, uygulamanızın belirli bir davranışını tanımlayan eylemlerin belirli bir sırayla gönderilmesini sağlamak istiyorsanız (örneğin, veri getirme başladığında ekranda bir yükleyici gösteriliyorsa). Bu yüzden "teknik" işaretinizin sonunda UI'nizi yöneteceğini düşünüyorum.

Redüktörünüzün "yalnızca düşürülmesine" izin vermek için, durumunuzu oluşturucuyu test eden durumunuzu test ederek göndermeden önce kontrol edebilirsiniz. Bu desen Redux'un belgesinde async actions hakkında ayrıntılı olarak açıklanmıştır. o uygulamayı kırmak etmezse

function toFetchedSuccess(data) { // "thunk" action creator 
    return (dispatch, getState) => { 
     const state = getState(); // current state 
     if(!state.isAllowed) { 
      console.error(
       'You did not dispatch PRE_FETCH_ACTION before fetching!'); 
      return Promise.resolve(); // nothing to do 
     } else { 
      return dispatch(fetchedSuccess(data)); 
     } 
    }; 
}