ReduxToolkitでリクエストをキャンセルしたい

Question

前提

React ReduxToolkitを使用してSPAのサイトを作成しています
（非同期通信にはaxiosを使用）

実現したいこと

1回のリクエストに１０秒ほどかかる処理があり、その処理の途中で別画面に遷移したとき、前回のリクエストを中止したいです

発生している問題・エラーメッセージ

1回目のリクエストの処理中に別画面に遷移すると、２回目のリクエスト処理が動き、2回目のレスポンスが先に返却されます
その後、遅れて１回目のレスポンスが画面に現れてしまいます
最後にリクエストした返却値を画面で表示させたいので、初回リクエストの処理を中止したいです

該当のソースコード

export const fetchMonitorPost = createAsyncThunk(
  'monitor/post',
  async (arg, thunkAPI) => {
    const { userId } = thunkAPI.getState().user;
    const res = await axios.post(`${apiUrl}monitoring`, {
      user_id: userId,
    });
    return res.data;
  }
);

Buttoncomponentでチャンネルが変わるとリクエストを投げるようにしています。

const [channnel, setChennel] = useState('1')
  useEffect(() => {
    dispatch(fetchMonitorPost ());
  }, [channel]);

試したこと

cancelトークンを使用してみようと思ったのですが、ReduxToolkitでの書き方が分かりませんでした。

よろしくおねがいします

Comments

[hoshi-takanori]

このへん？
https://stackoverflow.com/questions/60327829/cancel-previous-fetch-request-with-redux-thunk
https://olya777.medium.com/how-to-prevent-race-conditions-and-cancel-api-requests-in-your-react-react-native-app-using-redux-a06b4afd0ad9

[fujimaruuuun]

2つ目の記事を参考に実装できました！教えていただきありがとうございます！

Answer 1

hoshi-takanoriさんに教えていただいた記事を参考に解決しました。
https://olya777.medium.com/how-to-prevent-race-conditions-and-cancel-api-requests-in-your-react-react-native-app-using-redux-a06b4afd0ad9

ステートにPromiseを保存し、2回目にリクエストを投げるときに前回のリクエストをabortする方法で成功しました。