Loader

Question 1

Loader

Answer 1

После запуска приложения во время запроса на сервер за тудулистами отображается только поле для ввода названия тудулиста.

После рендера тудулистов какое-то время нужно ждать загрузку тасок. Пользователь со слабым интернетом может подумать, что приложение не работает, если сразу не видно ожидаемых данных. Front-end разработчики должны заботиться о пользователе и отображать на экране loader, говорящий о происходящем процессе загрузки данных.

Нужно показать пользователю, что идет загрузка данных с сервера. Для этого можно использовать компонент LinearProgress из MUI в Header.tsx

Ссылка: https://mui.com/material-ui/react-progress/#linear

Воспользуйтесь рекомендацией из Redux для вариантов статуса: - idle - запрос еще не начался; - loading - запрос в процессе выполнения; - succeeded - запрос успешно завершен; - failed - запрос не удался

export type RequestStatus = ‘idle’ | ‘loading’ | ‘succeeded’ | ‘failed’

1. Добавьте в начальный стейт appSlice свойство status с этим типом:
   app-slice.ts
   import type { RequestStatus } from ‘@/common/types’

export const appSlice = createSlice({
name: ‘app’,
initialState: {
themeMode: ‘light’ as ThemeMode,
status: ‘idle’ as RequestStatus,
},
/…/
})
Самостоятельно напишите setAppStatusAC.
Самостоятельно напишите selectStatus.

export const appSlice = createSlice(({
name: ‘app’,
initialState: {
themeMode: “light” as ThemeMode,
status: ‘idle’ as RequestStatus
},
reducers: (create) => ({
changeThemeModeAC: create.reducer<{ themeMode: ThemeMode }>((state, action) => {
state.themeMode = action.payload.themeMode
}),

changeAppStatusAC: create.reducer<{ status: RequestStatus }>((state, action) => {
  state.status = action.payload.status
}),

}),
selectors: {
selectThemeMode: (state): ThemeMode => state.themeMode,
selectAppStatus: (state): RequestStatus => state.status,

}}))

export const {changeThemeModeAC, changeAppStatusAC} = appSlice.actions
export const {selectThemeMode, selectAppStatus} = appSlice.selectors
export const appReducer = appSlice.reducer

2. Настройте отображение LinearProgress только когда status === ‘loading’с помощью условия в Header.tsx:
   Header.tsx
   {
   status === ‘loading’ && <LinearProgress></LinearProgress>
   }
   Самостоятельно напишите selectAppStatus и используйте его для получения статуса в компоненте Header.
3. Для этого в fetchTodolistsTC задиспатчите setAppStatusAC с нужным статусом: перед запросом на сервер - loading, после успешного запроса - succeeded, а после неудачного - failed:

todolists-slice.ts
export const todolistsSlice = createAppSlice({
/…/
reducers: create => ({
fetchTodolistsTC: create.asyncThunk(
async (_, { dispatch, rejectWithValue }) => {
try {
dispatch(setAppStatusAC({ status: ‘loading’ }))
const res = await todolistsApi.getTodolists()
dispatch(setAppStatusAC({ status: ‘succeeded’ }))
return { todolists: res.data }
} catch (error) {
dispatch(setAppStatusAC({ status: ‘failed’ }))
return rejectWithValue(null)
}
}
/…/
),
/…/
}),
})