Redux Toolkit 的 CreateAsyncThunk 有哪些常见用例

Question

有人可以像我 9 岁一样向我解释什么以及如何使用 createAsyncThunk 吗？什么是动作字符串？是因为 logic/path 的原因临时创建的，然后很快就销毁了吗？人们通常用它来做什么 strings/what 操作？我一直盯着文档看，看不懂。

这就是别人使用密码的方式，如果有人能破译这个我会很高兴。

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' 这是您的 reducer 将接收的 actionType，接收两个参数的异步部分是负载生成器。

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

函数 createAsyncThunk 因为它是 return 的两个参数，一个是 actionType，第二个是 Payload 正是执行 reducer 函数所需的参数。

现在如果你想使用你的方法应该是这样的。

dispatch(action(formValuesFromLocalState, APIInstance));

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

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语句return response.data 是实际有效负载。

所以最后，调度函数可能看起来像这样：

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

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

Redux Toolkit 的 CreateAsyncThunk 有哪些常见用例

What are some common Redux Toolkit's CreateAsyncThunk use cases

javascript

reactjs

redux

redux-toolkit