使用redux-thunk取消之前的异步操作

Question

我使用redux-thunk中间件来构建React/Redux应用程序来创建和处理Ajax请求。我有一个经常被触发的特殊thunk，并且我想在启动一个新的之前取消之前启动的任何Ajax请求。这可能吗？

Answer 1

一种方法是将这些请求标记为取消，方法是在处理结果之前给它们随机标识并检查其状态。

执行此操作的方法是在第一次调度（在thunk中）为此调用分配随机标识，并在处理结果之前在reducer中检查它。

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

如果要取消所有的请求都使用

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

当你要处理的结果，不要忘记发送的ID你的U

和减速机有这样的东西：

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

如果您使用XMLH ttpRequest或它的一个包装器（JQuery？），你也可以自己存储请求并调用request.abort（）。如果你使用新的提取API，你就没有这种奢侈，因为承诺缺乏这种行为。

Answer 2

您可以让您的动作创建者返回承诺，它将由调度功能返回，然后可以中止它。这里有一个例子：

行动的创建者

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

你的组件

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

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