Dinlenmem API veri almak bir <strong>uyumsuz</strong> harekete sahip

Question

bir işlemden sonra Redux gönderme işlemi tepki top = 10, skip = 0 için başlangıç ​​durumu. bileşeninde:

ilk seferde düğmesi Sonraki tıklandığında

class List extends Component { 
    componentDidMount() {   
     this.list(); 
    } 

    nextPage() { 
     let top = this.props.list.top; 
     let skip = this.props.list.skip; 

     // After this 
     this.props.onSetSkip(skip + top); 

     // Here skip has previous value of 0. 
     this.list(); 
     // Here skip has new value of 10. 
    } 

    list() { 
     this.props.List(this.props.list.top, this.props.list.skip); 
    } 

    render() { 
     return (
      <div> 
       <table> ... </table> 
       <button onClick={this.nextPage.bind(this)}>Next</button> 
      </div> 
     ); 
    } 
} 

, zaman uyumsuz işlem kullanır skip değeri değil değişti. eşitleme eyleminden sonra nasıl işlem yapabilirim?

Answer 1

yanıtlar için teşekkürler, ama bunu şu şekilde yaptı:

let top = this.props.list.top; 
let skip = this.props.list.skip; 
let newSkip = skip + top; 

this.props.onList(top, newSkip); 
this.props.onSetSkip(newSkip); 

Önce skip yeni hesaplar ve bu yeni değere sahip bir zaman uyumsuz işlem gönderir. Ardından, skip durumunu güncelleyen bir syns eylemi gönderirim. Eğer redux thunk kullanıyorsanız

Answer 2

Senkronizasyon eyleminden sonra bir eylemi göndermek yerine, işlevi yalnızca redüktörden mi çağırabilirsiniz?

Yani bu akışı aşağıdaki gibidir:

Sync eylem çağrısı -> Redüktör çağrı ---> vaka fonksiyonu (redüktör) ---> vaka fonksiyonu (redüktör)

yerine muhtemelen sizin için bu olağan akışı:

Sync eylem çağrısı -> Redüktör çağrı

Bu kılavuz redüktörlerini görmek için bu kılavuzu split the reducers up'a uyun.

Göndermek istediğiniz eylem yan etkilere sahipse, o zaman doğru yol Thunks kullanmaktır ve ardından bir eylemden sonra bir eylem gönderebilirsiniz.

Thunks için

Örnek:

export const setSkip = (skip) => { 
    return (dispatch, getState) => { 

     dispatch(someFunc()); 
     //Do someFunc first then this action, use getState() for currentState if you want 
     return { 
      type: 'LIST.SET_SKIP', 
      skip: skip 
     }; 
    } 
}; 

Answer 3

gönderme ({türü: 'LIST.SUCCESS', veriler: veriler, atlama: senkron işlemden sonra istediğiniz değeri});

Answer 4

da redux-sequence-action

Answer 5

bunu kontrol, kolayca birleştirebilirsiniz. Eylem oluşturucuların bir eylem yerine işlev döndürmesini sağlayan bir ara katman yazılımıdır.

Eylem oluşturucuları zincirlemeniz ve yalnızca ikisini birden çalıştırmanız gerekmiyorsa, çözümünüz sizin için işe yarayabilirdi.

this.props.onList(top, newSkip); 
this.props.onSetSkip(newSkip); 

Eğer (bir senkron bir şekilde onları çağırarak) ya da ilk eylemin verilerini sevk dan bekleyen zincirleme olarak almak için, bu ben tavsiye ederim budur.

export function onList(data) { 
    return (dispatch) => { 
      dispatch(ONLIST_REQUEST()); 
    return (AsyncAPICall) 
    .then((response) => { 
     dispatch(ONLIST_SUCCESS(response.data)); 
    }) 
    .catch((err) => { 
     console.log(err); 
    }); 
    }; 
} 

export function setSkip(data) { 
     return (dispatch) => { 
       dispatch(SETSKIP_REQUEST()); 
     return (AsyncAPICall(data)) 
     .then((response) => { 
      dispatch(SETSKIP_SUCCESS(response.data)); 
     }) 
     .catch((err) => { 
      console.log(err); 
     }); 
     }; 
    } 

export function onListAndSetSkip(dataForOnList) { 
    return (dispatch) => { 
    dispatch(onList(dataForOnList)).then((dataAfterOnList) => { 
     dispatch(setSkip(dataAfterOnList)); 
    }); 
    }; 
}