在 createAsyncThunk 的 onSubmit 中传递字符串的问题

Question

我是 Redux 的新手。我做了一个应用程序 Rest Countries Api，我需要来自 api 所有国家和所有地区 onChange 在我的提交选项中。我的想法是在组件 url:string 的调度中传递给 args，但我一直遇到问题，控制台写信给我“index.js:1 在路径中的操作中检测到不可序列化的值：payload. 值：async (dispatch, getState) => { return await fetch(url).then(res => res.json());" 我尝试使用中间件解决这个问题，但仍然不起作用:( 我在沙盒中的代码：

https://codesandbox.io/s/interesting-cerf-8sbh0?file=/src/redux/store.js

感谢大家的帮助

Answer 1

看起来有两个问题，您正在创建名称为 countries/getUsers 而不是 countries/getCountries 的异步 thunk。此外，您将 getCountries 作为一个函数，而 returns 是一个函数，因此它并没有真正按照您的预期执行。请尝试以下操作：

export const getCountries = createAsyncThunk(
  "countries/getCountries",
  async (url) => {
    return await fetch(url).then((res) => res.json());
  }
);

如果你确实需要 dispatch 或类似的，你可以使用 second argument 即 thunkApi:

export const getCountries = createAsyncThunk(
  "countries/getCountries",
  async (url, thunkAPI) => {
    const { dispatch } = thunkAPI;
    return await fetch(url).then((res) => res.json());
  }
);

这里是working example.

在 createAsyncThunk 的 onSubmit 中传递字符串的问题

problem with passing a string in onSubmit in createAsyncThunk

reactjs

react-redux

redux-toolkit