[英]What are some common Redux Toolkit's CreateAsyncThunk use cases
Could somebody please explain to me what and how to use createAsyncThunk like I'm 9 years old?有人可以像我 9 岁那样向我解释什么以及如何使用 createAsyncThunk 吗? What is the action string for?动作字符串有什么用? Is it temporarily created for logic/path reasons and destroyed soon later?它是出于逻辑/路径原因临时创建并很快销毁吗? What can I do with the action strings/what do people usually use it for?我可以用操作字符串做什么/人们通常用它做什么? I've been staring at the documentation forever and I am not able to understand it.我一直盯着文档看,我无法理解。
This is how somebody else used the code, if somebody could decipher this I would be so happy.这就是其他人使用代码的方式,如果有人能破译这个我会很高兴。
const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
const data = await axios.post('/api', object);
data.reduxRequestId = thunkAPI.requestId;
return data;
}
Official documentation: https://redux-toolkit.js.org/api/createAsyncThunk官方文档: https://redux-toolkit.js.org/api/createAsyncThunk
Well you can divide Async Thunk functions and Reducer functions into a separate types.好吧,您可以将 Async Thunk 函数和 Reducer 函数划分为单独的类型。 They aren't exactly the same and you should notice that.它们并不完全相同,您应该注意到这一点。
Reducer functions can't execute asyncronous code, they can execute code and update the state, but if you want to fetch or update something from a server, and then update the Redux state, you will not be able to achieve this solely by using reducer functions. Reducer 函数不能执行异步代码,它们可以执行代码并更新 state,但是如果您想从服务器获取或更新某些内容,然后更新 Redux Z9ED39E2EA931586B76A985A694,您将无法单独使用 EF 来实现此目的。功能。
So, that's why we need Action creators (or AsyncThunk functions), which let us to execute asynchronous code and then update the actual state of Redux.所以,这就是我们需要动作创建器(或 AsyncThunk 函数)的原因,它让我们能够执行异步代码,然后更新 Redux 的实际 state。
const action =
you define a constant which receives (in this case) another function which is createAsyncThunk
which receives two arguments the first one the action type
and the second one the payloadCreator callback
您定义一个常量,它接收(在这种情况下)另一个 function 这是createAsyncThunk
接收两个 arguments 第一个是action type
,第二个是payloadCreator callback
const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
so in this case action
receives a predefined object (createAsyncThunk).所以在这种情况下, action
接收到一个预定义的 object (createAsyncThunk)。
If you remember, to use a reducer function you usually need two parameters, one is actionType
and the second one is the payload
.如果您还记得,要使用减速器 function 通常需要两个参数,一个是actionType
,第二个是payload
。
with the createAsyncThunk the first parameter it receives is the actionType which is 'send/sendAction'
this is the actionType your reducer will receive, and the async part which receives two parameters is the payload generator.使用 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;
}
The function createAsyncThunk as it is returns two parameters, one is the actionType
and the second one is the Payload
exactly those which you need to execute a reducer function. function createAsyncThunk 因为它返回两个参数,一个是actionType
,第二个是Payload
,正是执行减速器 function 所需的参数。
now if you want to use your method should be something like this.现在如果你想使用你的方法应该是这样的。
dispatch(action(formValuesFromLocalState, APIInstance));
the arguments or parameters you pass to that function in this case (formValuesFromLocalState and APIInstance) will pass to the async function so they will be something like this arguments 或在这种情况下传递给 function 的参数(formValuesFromLocalState 和 APIInstance)将传递给异步 function,因此它们将类似于此
const action = createAsyncThunk('send/sendAction', async (form = formValuesFromLocalState, thunkAPI = APIInstance)
with those parameters the way your method will execute or you may want to do it should be something like this.使用这些参数,您的方法将执行或您可能想要执行的方式应该是这样的。
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).
}
in the documentation they put a better example在文档中,他们举了一个更好的例子
They execute the function this way:他们以这种方式执行 function:
dispatch(fetchUserById(123))
and the actual function is:实际的 function 是:
const fetchUserById = createAsyncThunk(
'users/fetchByIdStatus',
async (userId, thunkAPI) => {
const response = await userAPI.fetchById(userId)
return response.data
}
)
so, the function only receives in this case userId
, thunkAPI
is not used.因此,function 在这种情况下只接收userId
,不使用thunkAPI
。
'users/fetchByIdStatus'
is the actionType which will be dispatched.是将被分派的 actionType。
const response = await userAPI.fetchById(userId)
return response.data
and the API call is an asynchronous code, and the return statement return response.data
is the actual payload.而API调用是异步代码,return语句return response.data
是实际payload。
so in the end, the dispatch function may look something like this:所以最后,调度 function 可能看起来像这样:
dispatch({type:'users/fetchByIdStatus', payload:(whatever response.data has)});
hope this explanation is understandable, and excuse me for my bad english.希望这个解释是可以理解的,请原谅我的英语不好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.