Question

请问有人像我9岁时一样如何以及如何使用createAsyncThunk吗？动作字符串是做什么用的？是否出于逻辑/路径原因临时创建并在不久后销毁了？我可以使用动作字符串做什么？人们通常将其用作什么？我一直在盯着文档，但我听不懂。

这是别人使用代码的方式，如果有人可以解密，我会很高兴。

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId;
  return data;
}

官方文档：https://redux-toolkit.js.org/api/createAsyncThunk

Answer 1

那么您可以将Async Thunk函数和Reducer函数划分为单独的类型。它们并不完全相同，您应该注意这一点。

Reducer函数无法执行异步代码，它们可以执行代码并更新状态，但是如果您要从服务器获取或更新某些内容，然后更新Redux状态，则您将无法仅实现此功能通过使用reducer函数。

因此，这就是为什么我们需要Action创建器（或AsyncThunk函数）的原因，这些创建器使我们能够执行异步代码，然后更新Redux的实际状态。

const action =

您定义一个常量，该常量接收（在这种情况下）另一个函数createAsyncThunk，该函数接收两个参数，第一个参数为action type，第二个参数为payloadCreator callback

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {

因此，在这种情况下，action接收到一个预定义的对象（createAsyncThunk）。

如果您还记得，要使用reducer函数，通常需要两个参数，一个是actionType，第二个是payload。

使用createAsyncThunk时，它接收到的第一个参数是actionType，'send/sendAction'是减速器将要接收的actionType，而接收两个参数的异步部分是有效负载生成器。

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId;
  return data;
}

函数createAsyncThunk本身返回两个参数，一个参数是actionType，第二个参数是Payload，正是您需要执行reducer函数的那些参数。

现在，如果您想使用自己的方法，应该是这样的。

dispatch(action(formValuesFromLocalState, APIInstance));

在这种情况下，您传递给该函数的参数或参数（formValuesFromLocalState和APIInstance）将传递给async函数，因此它们将像这样

const action = createAsyncThunk('send/sendAction', async (form = formValuesFromLocalState, thunkAPI = APIInstance)

带有这些参数的方法执行或您可能想要执行的方式应该是这样的。

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const object = /some specific way you want to morph the form values/
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId; 
  return data;  (this is the actual data which will be returned as a payload).
}

他们在文档中提出了一个更好的例子

他们以这种方式执行功能：

dispatch(fetchUserById(123))

，实际功能是：

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

因此，该函数仅在这种情况下接收userId，未使用thunkAPI。

'users/fetchByIdStatus'

是将要分派的actionType。

const response = await userAPI.fetchById(userId)
        return response.data

并且API调用是异步代码，并且返回语句return response.data 是实际的有效载荷。

最后，调度功能可能看起来像这样：

dispatch({type:'users/fetchByIdStatus', payload:(whatever response.data has)});

希望这种解释是可以理解的，请原谅我英语不好。

Redux Toolkit的一些常见CreateAsyncThunk用例是什么

1 个答案: