как правильно использовать createAsyncThunk

#javascript #reactjs #redux #redux-toolkit

#язык JavaScript #реагирует на #возвращение #redux-инструментарий

Вопрос:

Кто — нибудь знает инструментарий redux? Приведенный ниже код приводит к сбою всего моего приложения. Может ли кто-нибудь заметить проблему в моем asyncThunk, потому что я не могу…

 export const getBarbers = createAsyncThunk(  "/barbers/fetchBarbers",  async () =gt; {  return fetch("/api/barbers").then((res) =gt; res.json());  } );  

Удаление ключевого слова async устраняет сбой приложения, но я почти уверен, что мне это нужно.

Комментарии:

1. Этот код выглядит нормально. Что вы имеете в виду под «крушением»? Есть ли какая-нибудь ошибка?

2. Сообщения об ошибке нет, но мое приложение не будет отображаться, если я не удалю ключевое слово async

3. Если я сравниваю его с тем, как я его использую , я замечаю только два отличия: 1. Ваш createAsyncThunk параметр начинается с а / , мой-нет. 2. Ваше возвращение-это Обещание, мое-тоже await fetch... . Если бы мне пришлось выбирать виновника, он, вероятно, был бы первым, так что измените его на barbers/fetchBarbers , и все будет в порядке.

4. Я думаю, что нам нужно больше контекста, и, по вашему признанию, удаление async декларации, похоже, работает, нам нужно увидеть, как это действие используется и отправляется, чтобы понять, что происходит. Кроме того, вы смешиваете async/await синтаксис с цепочками обещаний, распространенным анти-шаблоном. Поскольку ваш thunk не ждет, пока что-нибудь разрешится, и просто возвращает fetch обещание, вы должны либо (1) удалить async и двигаться дальше, либо (2) завернуть fetch в a try/catch и await it и json разрешить и вернуть данные.