Вопрос по redux-thunk, redux, reactjs – Отмена предыдущего асинхронного действия с использованием redux-thunk

11

Я создаю приложение React / Redux, используя промежуточное программное обеспечение redux-thunk для создания и обработки запросов Ajax. У меня есть определенный thunk, который запускается довольно часто, и я хотел бы отменить любые ранее запущенные запросы Ajax перед запуском нового. Это возможно?

Ваш Ответ

3   ответа
3

Если вы используете jquery ajax, вы можете заставить своего создателя действия возвращать обещание, оно будет возвращено функцией диспетчеризации, тогда можно будет прервать его. Вот пример:

Создатель действий
function doSomething() {
  return (dispatch) => {
    return $.ajax(...).done(...).fail(...);
  }
}
Ваш компонент
  componentDidMount(){
    this.previousPromise = this.props.dispatch(doSomething());
  }

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

Недавно я столкнулся с той же проблемой, в которой мне пришлось отменить отложенные или устаревшие асинхронные действия с избыточностью. Я решил это, создав промежуточное программное обеспечение для отмены избыточных действий.

В редуксе у нас есть понятия промежуточного программного обеспечения. Поэтому, когда вы отправляете запрос, он просматривает список промежуточного программного обеспечения. Как только API ответит обратно, его ответ пройдет через некоторое количество промежуточного программного обеспечения, прежде чем он достигнет хранилища резервов и, в конечном итоге, вашего пользовательского интерфейса.

Теперь предположим, что мы написали промежуточное ПО отмены. Запрос API будет проходить через это промежуточное ПО, когда он инициируется, и ответ API также будет проходить через это промежуточное программное обеспечение, когда API ответит обратно.

Каждый запрос API в Redux связан с действием, каждое действие имеет тип и полезную нагрузку.

Напишите промежуточное программное обеспечение, которое всякий раз, когда выполняется запрос API, сохраняет связанный тип действия. Наряду с этим, он хранит флаг, который указывает, следует ли отменить это действие. Если действие подобного типа запускается снова, сделайте этот флаг true, который говорит, что отменить это действие Когда ответ API поступает на предыдущее действие, так как флаг сброса для этого запроса API был установлен в значение true, отправьте нулевое значение в качестве ответа от промежуточного программного обеспечения.

Посмотрите на этот блог для получения подробной информации об этом подходе.

https://tech.treebo.com/redux-middlewares-an-approach-to-cancel-redux-actions-7e08b51b83ce

11

Один из подходов состоит в том, чтобы пометить эти запросы как отмененные путем присвоения им случайного идентификатора и проверки его состояния перед обработкой результата.

Способ сделать это состоит в том, чтобы назначить случайный идентификатор для этого вызова в вашей первой диспетчеризации (внутри блока) и проверить его в редукторе перед обработкой результата.

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

Когда вы хотите отменить все запросы, используйте

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

Если вы хотите обработать результаты, не забудьте отправить идентификатор, который вы

а в редукторе есть что-то вроде этого:

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

Если вы используете XMLHttpRequest или одну из его оболочек (JQuery?), Вы также можете сохранить сами запросы и вызвать request.abort (). если вы используете новый API fetch, у вас нет такой роскоши, как в обещаниях такого поведения нет.

Похожие вопросы