Redux-thunk 和 axios - 请求取消

Question

I've an app with redux-thunk , redux-pack and axios on board.

My actions looks like this:

export const getEntities = () => (dispatch, getState, { api }) => {
  return dispatch({
    type: ENTITIES_LOAD,
    promise: api.getEntities(),
    meta: {},
  });
};

I call them in componentDidMount .

My question is - what is the best way to cancel those actions along with the request itself? I've read about Cancel Token that axios uses, but how should I cancel the action first?

Answer 1

I found myself cancelling the requests using cancel tokens. Kind of a way out of this issue, but I attached them to a global variable (like window ), so every time the request is made, the new token is added to an object (with its own key), and every time a request is finished, this key is removed.

So I have something like this available inside the client part of the app:

window.cancellationTokens = { myOwnTokenKey: theActualToken }

If in need of cancelling a request (eg user leaving a route that fetches data on componentDidMount ), I just do:

cancelRequest(nameOfTheKey);

Function called cancelRequest takes one argument, that is the actual key of the request and looks like this:

const cancelRequest = (keyName) => {
    if (typeof window === 'undefined') return;
    const cancelMethod = window.cancellationTokens[keyName];
    if (!cancelMethod) return;
    cancelMethod();
}

Answer 2

Maybe you should consider adding redux-saga, make action canceling easy. See the docs https://redux-saga.js.org/