react: Getting access to International State inside Async Thunks with TypeScript

The payloadCreator argument to createAsyncThunk takes two arguments. The primary is a unmarried arg that receives knowledge handed into the thunk’s motion author comparable to dispatch(checkout(pieces)). The second one is named thunkAPI that accommodates one thing like 7 other strategies on it. Right here we are going to use its getState() option to get right of entry to the worldwide state simply ahead of we make whole the checkout API name.

In the case of typing createAsyncThunk similar to different RTK strategies, it’s going to most commonly be typed by means of default. On this case we nonetheless want to inform it about our retailer. We will be able to do this with thunkAPI.getState() as RootState which I feel is the most popular strategy to deal with the kinds right here. If we truly wish to be thorough even though, we will be able to go within the complete varieties like this:

createAsyncThunk< PayloadResponse, ThunkArgument, { state: RootState }
>("slice/typeName", payloadCreator)