Что такое thunk в react?

504
Что такое thunk в react?

В React thunk - это функция, которая задерживает выполнение действия до тех пор, пока не будут получены определенные данные или выполнены другие условия. В контексте React, thunk обычно используется для асинхронной загрузки данных или для задержки выполнения действия до тех пор, пока не будут выполнены определенные условия, например, проверка состояния.

Thunk-функция в React обычно возвращает функцию, которая вызывает действие с задержкой. Это позволяет разделить асинхронную логику и действие на две отдельные функции, что делает код более читабельным и поддерживаемым.

Например, если мы хотим загрузить данные с сервера в React приложении, мы можем использовать thunk-функцию для задержки выполнения действия до тех пор, пока данные не будут загружены:


 

Здесь мы экспортируем функцию fetchUserData, которая принимает userId в качестве параметра. Функция возвращает thunk, которая задерживает выполнение действия до тех пор, пока данные не будут загружены с помощью функции fetchData. После загрузки данных, thunk диспатчит экшен FETCH_USER_SUCCESS с данными в качестве payload. Если произойдет ошибка, thunk диспатчит экшен FETCH_USER_FAILURE с сообщением об ошибке в качестве payload.

 

createAsyncThunk - это функция из библиотеки Redux Toolkit, которая позволяет создавать асинхронные action creators. Эта функция принимает два аргумента: тип экшена и функцию-обработчик. Функция-обработчик должна возвращать Promise, который резолвится с данными, которые вы хотите передать в payload вашего экшена.

Вот некоторые возможности createAsyncThunk:

  1. Обработка асинхронных операций: createAsyncThunk позволяет легко и удобно обрабатывать асинхронные операции, такие как загрузка данных с сервера.

  2. Обработка нескольких состояний: при использовании createAsyncThunk вы можете обрабатывать три разных состояния в одном экшене: pending (запрос отправлен), fulfilled (запрос выполнен успешно) и rejected (запрос выполнен с ошибкой).

  3. Генерация стандартных экшенов: createAsyncThunk генерирует стандартные экшены для каждого состояния (pending, fulfilled, rejected), что делает их легко отслеживаемыми и понятными для использования в вашем приложении.

  4. Обработка ошибок: createAsyncThunk обрабатывает ошибки, возникающие во время выполнения Promise, и генерирует экшен rejected с ошибкой в payload.

  5. Доступ к getState и extraArg: в функции-обработчике createAsyncThunk вы можете получить доступ к getState и extraArg, что позволяет использовать их в процессе обработки вашего запроса.

  6. Обработка более сложных операций: createAsyncThunk может использоваться для обработки более сложных операций, таких как запросы на сервер, обращения к API и многое другое.

  7. Использование с middleware: createAsyncThunk может использоваться с middleware, такими как thunk и saga, что позволяет использовать их вместе с другими библиотеками и расширениями Redux.