Cách xử lý hai cuộc gọi Async liên tiếp và phụ thuộc trong Redux?

Question

Tôi nhận được danh sách các bài đăng không đồng bộ bằng cách gọi một hành động fetchPosts từ một Thành phần trên componentDidMount. Tôi muốn, một khi yêu cầu đó được nhận và xử lý bởi bộ giảm tốc có liên quan (cập nhật trạng thái), để gọi một hành động khác fetchPostsMetaData, với một loạt các id của các bài viết vừa nhận được.

Tôi đang sử dụng redux-thunk middleware, và làm cho các yêu cầu ajax của tôi sử dụng jQuery.ajax

cách tốt nhất để đi về việc này là gì? Tôi đã thử googling nhưng không thể tìm thấy một ví dụ/câu trả lời có liên quan.

Answer 1

Sử dụng redux-thunk:

class PostIndex extends React.Component { 
    componentDidMount() { 
    const { dispatch } = this.props; 
    dispatch(getPosts()); 
    } 
    ... 
} 

function fetchPosts() { 
    return dispatch => { 
    fetchPostsAjax() 
     .then(res => { 
     dispatch({ type: 'RECEIVE_POSTS', payload: res }); 
     dispatch(fetchPostMeta(res)); 
     }) 
    } 
} 

function fetchPostMeta(posts) { 
    return dispatch => { 
    fetchPostMetaAjax(posts) 
     .then(res => dispatch({ type: 'RECEIVE_POST_META', payload: res })); 
    } 
    } 
} 

function fetchPostAjax() { 
    // return a promise, whether from jQuery.ajax or fetch 
} 

function fetchPostMetaAjax() { 
    // return a promise 
} 

Đây là một tình huống khá chuẩn cho redux-thunk. Ví dụ trên được phục vụ theo cách bạn đặt câu hỏi, nhưng bạn có thể thực hiện việc này trong một người tạo hành động đơn lẻ trông giống như ví dụ redux-thunk được cung cấp tại đây: http://redux.js.org/docs/advanced/AsyncActions.html

Điều khác biệt là trong ví dụ của tôi gửi một thunk bên trong một thunk, chứ không phải là làm nhiệm vụ thứ hai trực tiếp bên trong của thunk đầu tiên. Vì vậy, giá trị tương đương như sau:

function fetchPosts() { 
    return dispatch => { 
    fetchPostsAsync() 
     .then(res => { // res is posts 
     dispatch({ type: 'RECEIVE_POSTS', payload: res }); 
     return fetchPostMetaAsync(res); 
     }) 
     .then(res => { // res is metadata 
     dispatch({ type: 'RECEIVE_POST_META', payload: res }); 
     }) 
    } 
} 

Bạn sẽ không gặp phải bất kỳ điều kiện chủng tộc bởi vì khi bạn gửi một hành động như { type: RECEIVE_POSTS, payload: res }, nó là đồng bộ và cập nhật giảm tốc trước khi bạn cử hành động async sau.