createAsyncThunk: ошибка при вызове конечной точки не запускается .rejected

Question

Я пробую @reduxjs/toolkit v1.4.0

Я пробовал обрабатывать ошибки. Хотя я могу получить ошибку с конечной точки:

{
  "code": "missing_access_key",
  "message": "You have not supplied an API Access Key. [Required format: access_key=YOUR_ACCESS_KEY]"
}

Я не могу заставить его срабатывать:

    builder.addCase(fetchUsers.rejected, (state, action) => {
      // FIXME: rejected not being called on error
      state.loading = false
      state.error = action.error.message
    })

Я продолжаю смотреть документы и даже пробовал rejectWithValue. "Ожидающие" и "выполненные" условия вызываются в случае успеха, но я не могу вызвать "отклонено". Я также пробовал блоки try/catch. Был бы очень признателен, если бы кто-нибудь сообщил мне, что я делаю не так.

export const fetchUsers = createAsyncThunk(
  'posts/fetchUsers',
  async (users: Users) => {
    const response: any = await fetch(
      `${ENDPOINTS.USERS_SOURCE}tickers/search=${answers.ticker}&access_key=${process.env.MARKET_WATCH_API_KEY}&limit=${RESULTS_LIMIT}`
    )

    return response.data
  }
)

type SliceState = {
  error?: null | string
  loading: boolean
  data: null | SingleUser
  selectedData: null | SingleUser
}

// First approach: define the initial state using that type
const initialState: SliceState = {
  error: null,
  loading: false,
  data: null,
}

export const UsersSlice = createSlice({
  name: 'Users',
  initialState,
  reducers: {
    clearUsers: (state) => {
      state.data = null
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchUsers.pending, (state) => {
      state.data = null
      state.loading = true
    })
    builder.addCase(fetchUsers.fulfilled, (state, action) => {
      state.loading = false
      state.data = action.payload
    })
    builder.addCase(fetchUsers.rejected, (state, action) => {
      // FIXME: rejected not being called on error
      state.loading = false
      state.error = action.error.message
    })
  },
})

export const { clearUsers } = UsersSlice.actions

export default UsersSlice.reducer

Answer 1

В fetch()метод возвращает обещание, которое разрешается независимо от того, был ли запрос успешным, если только не произошла сетевая ошибка. Другими словами, обещание не отклоняется, даже если ответ имеет код состояния HTTP 400 или 500.

Чтобы обеспечить fetchUsers.rejectedВ этом случае вызывается reducer, вы должны проверить Response.ok после разрешения Promise, как в этом минимальном примере:

const response = await fetch(url)

if (!response.ok) {
  // throw appropriate error
}

...

См. Использование Fetch для получения дополнительной информации.