React Redux Toolkit中的Thunk Mifdreware的承诺如何返回承诺？

Question

目前，我遇到了一个无法解决的问题。 我正在使用thunk中间件来创建费用，如下所示。

import { createAsyncThunk } from "@reduxjs/toolkit";
import axios from "../../../../src/axios";

export const addExpense = createAsyncThunk(
    "expense/addExpense",
    async (expense) => {
        try {
            const res = await axios.post("/expense", expense);
            // console.log(res);
            return { expense: res.data.expense, errorMessage: "" };
        } catch (err) {
            // console.log(err);
            return { errorMessage: err.response.data.message, expense: null };
        }
    }
);

我正在使用用于管理状态的额外的还原文件

[addExpense.pending]: (state) => {
    state.creatingExpense = true;
},
[addExpense.fulfilled]: (state, action) => {
    const { expense, errorMessage } = action.payload;
    state.creatingExpense = false;
    if (state.expense && state.currentMonth === expense.month)
        state.expense = [...state.expense, expense];
    else if (errorMessage !== "") state.error = errorMessage;
},
[addExpense.rejected]: (state, action) => {
    state.creatingExpense = false;
    state.error = action.error;
},

，现在我在填写表单后和下面的文件中的onsubmit函数在下面的onsubmit函数上

const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addExpense(form));
    const year = form.date.split("-")[0];
    const month = form.date.split("-")[1];
    // console.log(error, creatingExpense);
    // if (error) return alert(error);
    navigate(`/year/${year}/${months[month - 1]}`);
};

，每当我创建费用时，它都会直接导航到 /年页面而无需实现。 因此，我该如何回报诺言，以便我可以像以下那样使用导航

dispatch(addExpense(form)).then(() => {
    navigate(`/year/${year}/${months[month - 1]}`);
}).catch((err) => {
    console.log(err);
});