createAsyncThunk异步函数第二个参数返回对象而非预期字符串的原因

你遇到的问题是：使用createAsyncThunk时，异步函数的第二个参数没有拿到预期的字符串，而是返回了包含dispatch、getState等属性的对象。

问题场景代码 #

dispatch调用处

const handleDateChange = (e) => {
  const date = e.target.value;
  console.log(date, code); // date和code打印均正常
  dispatch(fetchCurrencyByCodeLatestInSpecificDate(date, code));
};

createAsyncThunk定义

export const fetchCurrencyByCodeLatestInSpecificDate = createAsyncThunk(
  FETCH_CURRENCIES_BY_CURRENCY_CODE__IN_SPECIIC_DATE,
  async (date, code) => {
    console.log(date, code); // date正常，code返回{extra: undefined, requestId: 'xxx', ...}这类thunkAPI对象
    const response = await fetch(`${CURRENCIES_BASE_API_URL}/${date}/currencies/${code}.json`);
    const data = await response.json();
    return data;
  },
);

问题原因 #

createAsyncThunk的异步函数仅接受一个用户自定义参数（payload），第二个参数是框架固定传入的thunkAPI对象（包含dispatch、getState、signal等工具属性）。你直接传入两个参数时，第二个参数code会被框架替换成thunkAPI，而非你传入的字符串。

解决方案 #

将需要传递的多个参数包装成单个对象或数组传入，在异步函数中解构获取：

方案1：用对象传递参数

修改dispatch调用：

const handleDateChange = (e) => {
  const date = e.target.value;
  console.log(date, code);
  // 将date和code包装为对象传入
  dispatch(fetchCurrencyByCodeLatestInSpecificDate({ date, code }));
};

修改createAsyncThunk定义：

export const fetchCurrencyByCodeLatestInSpecificDate = createAsyncThunk(
  FETCH_CURRENCIES_BY_CURRENCY_CODE__IN_SPECIIC_DATE,
  // 解构对象获取date和code
  async ({ date, code }) => {
    console.log(date, code); // 现在能拿到预期的字符串
    const response = await fetch(`${CURRENCIES_BASE_API_URL}/${date}/currencies/${code}.json`);
    const data = await response.json();
    return data;
  },
);

方案2：用数组传递参数

修改dispatch调用：

const handleDateChange = (e) => {
  const date = e.target.value;
  console.log(date, code);
  // 将date和code包装为数组传入
  dispatch(fetchCurrencyByCodeLatestInSpecificDate([date, code]));
};

修改createAsyncThunk定义：

export const fetchCurrencyByCodeLatestInSpecificDate = createAsyncThunk(
  FETCH_CURRENCIES_BY_CURRENCY_CODE__IN_SPECIIC_DATE,
  // 解构数组获取date和code
  async ([date, code]) => {
    console.log(date, code); // 现在能拿到预期的字符串
    const response = await fetch(`${CURRENCIES_BASE_API_URL}/${date}/currencies/${code}.json`);
    const data = await response.json();
    return data;
  },
);

内容的提问来源于stack exchange，提问作者Desmond Owusu