Блог

Я пытаюсь создать простой вариант использования с помощью ReduxToolkit :

• Посылаю удар
• Отображение индикатора загрузки
• Прервите удар, если что-то произойдет до того, как последний удар завершится.

Я использую эффект :

   useEffect(() => {
    const runningThunk = dispatch(asyncThunk());
    return () => {
      runningThunk.abort();
    };
  }, [dispatch, count]);
 

и базовый срез :

 extraReducers: (builder) => {
    builder.addCase(asyncThunk.pending, (state) => {
      state.isLoading = true;
    });
    builder.addCase(asyncThunk.fulfilled, (state) => {
      state.isLoading = false;
    });
    builder.addCase(asyncThunk.rejected, (state) => {
      state.isLoading = false;
    });
 

Когда я запускаю этот код, вызывается прерывание, затем крючок запускается повторно и вызывается новая отправка. Пока все хорошо.

Но redux не справляется с этим таким же образом. Отправляется 2-й запрос, и ожидающее действие отправляется ДО того, как предыдущий запрос будет отклонен.

 1 - async-thunk/pending (Call 1)
2 - async-thunk/pending (Call 2)
3 - async-thunk/rejected (Call 1)
4 - async-thunk/fulfilled (Call 2)
 

Это приводит к тому, что мой индикатор загрузки отображается только между шагом 1 и шагом 3, так как отклоненный удар сбросил состояние.

Это что, ошибка ? Если это желаемое поведение, как я могу справиться со своей проблемой ?

Песочница, воспроизводящая проблему, когда мы дважды меняем счетчик, прежде чем закончится удар.

https://codesandbox.io/s/wonderful-chaum-stgsn

Этого нельзя избежать. Запуск thunk является асинхронным, и его прерывание также является асинхронным. Однако запуск удара происходит синхронно.

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

Смотрите первый пример в документации по API createAsyncThunk