不带参数的redux thunk PayloadCreator回调函数应该如何处理？

Question

我的应用程序需要在启动时获取设置。它不需要任何参数，因为它会获取所有内容。添加之前没有问题

rejectWithValue

以便向用户显示实际状态或错误。然而它需要 2 个参数，所以我这样做了：

export const fetchClientSettings = createAsyncThunk(
  'app-settings/fetch-client-settings', 
  async (_notUsed = undefined, { rejectWithValue }) => {
    try {
      const response = await fetch(API_URL);
      if (!response.ok) {
        return rejectWithValue(new Error(response.statusText));
      }
      return await response.json();
    } catch (error) {
      return rejectWithValue(error);
    }
  }
);

我想知道如何以正确的方式完成此操作。由于某种原因，文档没有提及这种情况。仅如何处理超过 1 个参数。

Answer 1

出于某种原因，文档没有提及这种情况。只是如何 处理超过 1 个参数。

那是因为这更像是一个 Javascript“东西”，而不是一个 Redux 和 Redux-Toolkit“东西”。有相当多的假设是开发人员熟悉该语言。

Redux-Toolkit 创建的操作 always 接受 up to 单个参数，例如动作有效负载。

createAsyncThunk

在这方面的行动没有什么不同。向有效负载创建者传递两个参数，即作为操作有效负载的值，以及允许异步操作访问存储实例和各种实用程序的

thunkApi

。

在 Javascript 中，如果一个函数采用多个参数，而这些参数不一定都需要定义值，则它们 必须 仍然在函数声明中声明。任何有效的 Javascript 标识符 都可以在这里使用，但常见的做法是对这些未使用的函数参数/参数使用下划线

"_"

字符。如果有超过 1 个未使用的参数，您还可以使用更具描述性的名称，例如

"_unused_arg_1"

。换句话说，任何对你或你的团队有用的东西都可以。如果您没有传递有效负载的值，您仍然需要声明一个标识符，以便您可以“跳过”它以到达您do需要访问的第二个参数。

export const myAsyncAction = createAsyncThunk(
  'async/myAsyncAction', 
  async (_, thunkApi) => {
    try {
      // ... happy path logic
      return data;
    } catch (error) {
      // ... sad path logic
      return thunkApi.rejectWithValue(error);
    }
  }
);

dispatch(myAsyncAction());

仅供参考，如果您需要将 超过 1 个参数传递给

createAsyncThunk

操作，您可以将其打包到单个对象中作为有效负载的第一个参数。

示例：

export const myAsyncAction = createAsyncThunk(
  'async/myAsyncAction', 
  async (arg, thunkApi) => {
    const { foo, bar } = arg;
    try {
      // ... happy path logic
      return data;
    } catch (error) {
      // ... sad path logic
      return thunkApi.rejectWithValue(error);
    }
  }
);

dispatch(myAsyncAction({ foo: "foo", bar: "bar" }));