thunk

Question 1

thunk

Answer 1

Thunk - функция, внутри которой можно делать побочные эффекты (запросы на сервер) и диспатчить action или другие thunk. Она принимает dispatch и getState. createAsyncThunk возвращает thunk creator и принимает аргументы: 1. type санки, являющийся строкой, собранной по принципу: ‘sliceName/thunkName’; 2. payloadCreator - функция, которая должна вернуть promise с результатом выполнения асинхронной логики внутри санки. В свою очередь эта функция принимает два аргумента: - значение, которое будет передано в thunk creator при диспатче; - thunkAPI - объект с параметрами, которые должны прийти в thunk; 3. options - объект настроек.

Работа:
-UI взаимодействует только с BLL (с помощью dispatch);
-BLL взаимодействует с DAL;
-DAL делает запрос на сервер и возвращает результат (response);
-BLL получает ответ сервера (response) и на его основании изменяет state;
-После изменения state перерисовывается UI.
Т. е. к уровню DAL нужно обращаться из уровня BLL. Теперь нужно определиться, где именно делать запрос на сервер. BLL состоит из store и reducers. Функция create.reducer предназначена для создания action creator и описания логики изменения стейта. В них нельзя нельзя делать побочные эффекты, они должны синхронно возвращать state.

Санки работают благодаря встроенному в RTK thunk middleware - промежуточному слою, который вклинивается в конвейер последовательных операций. Он перехватывает диспатчи и, если диспатчится action, отправляет его в редьюсер, а если это функция (санка), то запускает её. Thunk middleware позволяет диспатчить и объекты (экшены), и функции (санки)

Проблемы, которые решает:
1. Архитектурную
2. Детали работы сервера выносим в отдельную функцию

В компоненте Todolists, мы можем задиспачит thunk - которая будет отражена на сервере

Todolists.tsx
useEffect(() => {
dispatch(fetchtodolistsTC())
}, [])

TodolistsSlice.ts

Создаем функцию:
export const fetchtodolistsTC = createAsyncThunk(${todolistsSlice.name}/fetchtodolistsTC,
(_arg, thunkAPI) => {

const {dispatch} =thunkAPI
// async logic
todolistsApi.getTodolists().then((res) => {
// 3
dispatch(fetchTodolistAC({todolists: res.data}))
})
})