Redux-toolkit: Why do we need to check the loading state for createAsyncThunk reducers?

[KumailP]

In the documentation for createAsyncThunk, within the extra reducers the loading state is being checked.

extraReducers: {
    [fetchUserById.pending]: (state, action) => {
      if (state.loading === 'idle') {
        state.loading = 'pending'
      }
    },
    [fetchUserById.fulfilled]: (state, action) => {
      if (state.loading === 'pending') {
        state.loading = 'idle'
        state.push(action.payload)
      }
    },
    [fetchUserById.rejected]: (state, action) => {
      if (state.loading === 'pending') {
        state.loading = 'idle'
        state.error = action.error
      }
    }
  }

Will the loading state not be predictable by default? Is there a chance that .fulfilled is called while the loading state has not been set to pending in the .pending function?

[markerikson]

The "loading state" is whatever values you want to use. Traditionally, that's been something like {isLoading: boolean, error: string}. We're starting to try to encourage using some kind of an enum instead of booleans.

As for the timing thing, imagine a case where the user double-clicked on a button and triggered a fetch request twice. You'd probably only want the result to get handled one time.