Hủy hành động không đồng bộ trước đó bằng cách sử dụng redux-thunk

Question

Tôi đang tạo ứng dụng React/Redux bằng cách sử dụng phần mềm trung gian redux-thunk để tạo và xử lý các yêu cầu Ajax. Tôi có một thunk cụ thể được bắn khá thường xuyên, và tôi muốn hủy bỏ bất kỳ yêu cầu Ajax đã bắt đầu trước đó trước khi kích hoạt một cái mới. Điều này có thể không?

Answer 1

Một cách tiếp cận sẽ là đánh dấu các yêu cầu đó là bị hủy bằng cách cho chúng id ngẫu nhiên và kiểm tra trạng thái của nó trước khi xử lý kết quả.

Cách để thực hiện việc này là gán id ngẫu nhiên cho cuộc gọi này trong lần gửi đầu tiên của bạn (bên trong thư) và kiểm tra nó trong bộ giảm tốc trước khi xử lý kết quả.

const actionId = Math.random(); 
dispatch({type: AJAX_LOAD_CONST, id:actionId }) 

Khi bạn muốn hủy bỏ tất cả các yêu cầu sử dụng

dispatch({type:HANDLE_AJAX_RESPONSE, id:actionId, results: json })

Khi bạn muốn xử lý các kết quả không quên để gửi id mà bạn u

và trong bộ giảm tốc có dạng như sau:

function reducer(state = initialState, action) { 
    switch (action.type) { 
    case actions.AJAX_LOAD_CONST: 
     return Object.assign({}, state, { ajax: state.ajax.concat(action.id) }); 
    case actions.CANCEL_ALL_AJAX: 
     return Object.assign({}, state, { ajax: [] }); 
    case actions.HANDLE_AJAX_RESPONSE: 
     if (state.ajax.includes(action.id) { 
     //return state reduced with action.results here 
     } 
     return state; 
    } 
} 

Nếu bạn sử dụng XMLH ttpRequest hoặc một trong các trình bao bọc của nó (JQuery?), bạn cũng có thể lưu trữ các yêu cầu và gọi request.abort(). nếu bạn sử dụng api tìm nạp mới bạn không có sự sang trọng này như lời hứa thiếu hành vi này.

Answer 2

Bạn có thể làm cho người tạo hành động của bạn trả lại lời hứa, nó sẽ được trả về bởi chức năng gửi, sau đó nó sẽ có thể hủy bỏ nó. Dưới đây là một ví dụ:

Action tạo

function doSomething() { 
    return (dispatch) => { 
    return $.ajax(...).done(...).fail(...); 
    } 
} 

thành phần của bạn

componentDidMount(){ 
    this.previousPromise = this.props.dispatch(doSomething()); 
    } 

    somefnct() { 
    this.previousPromise.abort(); 
    }