diff --git a/src/app/app-reducer.ts b/src/app/app-reducer.ts index a8e72c3..18ca9d4 100644 --- a/src/app/app-reducer.ts +++ b/src/app/app-reducer.ts @@ -1,30 +1,10 @@ -import { Dispatch } from 'redux' +import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { authAPI } from 'api/todolists-api' import { setIsLoggedInAC } from 'features/Login/auth-reducer' - -const initialState: InitialStateType = { - status: 'idle', - error: null, - isInitialized: false, -} - -export const appReducer = ( - state: InitialStateType = initialState, - action: ActionsType -): InitialStateType => { - switch (action.type) { - case 'APP/SET-STATUS': - return { ...state, status: action.status } - case 'APP/SET-ERROR': - return { ...state, error: action.error } - case 'APP/SET-IS-INITIALIED': - return { ...state, isInitialized: action.value } - default: - return { ...state } - } -} +import { AppThunk } from 'app/store' export type RequestStatusType = 'idle' | 'loading' | 'succeeded' | 'failed' + export type InitialStateType = { // происходит ли сейчас взаимодействие с сервером status: RequestStatusType @@ -34,14 +14,34 @@ export type InitialStateType = { isInitialized: boolean } -export const setAppErrorAC = (error: string | null) => - ({ type: 'APP/SET-ERROR', error }) as const -export const setAppStatusAC = (status: RequestStatusType) => - ({ type: 'APP/SET-STATUS', status }) as const -export const setAppInitializedAC = (value: boolean) => - ({ type: 'APP/SET-IS-INITIALIED', value }) as const +const initialState: InitialStateType = { + status: 'idle', + error: null, + isInitialized: false, +} -export const initializeAppTC = () => (dispatch: Dispatch) => { +const appSlice = createSlice({ + name: 'app', + initialState, + reducers: { + setAppErrorAC(state, action: PayloadAction) { + return { ...state, error: action.payload } + }, + setAppStatusAC(state, action: PayloadAction) { + return { ...state, status: action.payload } + }, + setAppInitializedAC(state, action: PayloadAction) { + return { ...state, isInitialized: action.payload } + }, + }, +}) + +export const appReducer = appSlice.reducer + +export const { setAppInitializedAC, setAppStatusAC, setAppErrorAC } = + appSlice.actions + +export const initializeAppTC = (): AppThunk => (dispatch) => { authAPI.me().then((res) => { if (res.data.resultCode === 0) { dispatch(setIsLoggedInAC(true)) @@ -51,11 +51,3 @@ export const initializeAppTC = () => (dispatch: Dispatch) => { dispatch(setAppInitializedAC(true)) }) } - -export type SetAppErrorActionType = ReturnType -export type SetAppStatusActionType = ReturnType - -type ActionsType = - | SetAppErrorActionType - | SetAppStatusActionType - | ReturnType diff --git a/src/features/TodolistsList/tasks-reducer.ts b/src/features/TodolistsList/tasks-reducer.ts index 393000a..ef995d0 100644 --- a/src/features/TodolistsList/tasks-reducer.ts +++ b/src/features/TodolistsList/tasks-reducer.ts @@ -11,12 +11,8 @@ import { UpdateTaskModelType, } from 'api/todolists-api' import { Dispatch } from 'redux' -import { AppRootStateType } from 'app/store' -import { - SetAppErrorActionType, - setAppStatusAC, - SetAppStatusActionType, -} from 'app/app-reducer' +import { AppRootStateType, AppThunk } from 'app/store' +import { setAppStatusAC } from 'app/app-reducer' import { handleServerAppError, handleServerNetworkError, @@ -103,8 +99,8 @@ export const setTasksAC = ({ // thunks export const fetchTasksTC = - (todolistId: string) => - (dispatch: Dispatch) => { + (todolistId: string): AppThunk => + (dispatch) => { dispatch(setAppStatusAC('loading')) todolistsAPI.getTasks(todolistId).then((res) => { const tasks = res.data.items @@ -122,12 +118,8 @@ export const removeTaskTC = } export const addTaskTC = - (title: string, todolistId: string) => - ( - dispatch: Dispatch< - ActionsType | SetAppErrorActionType | SetAppStatusActionType - > - ) => { + (title: string, todolistId: string): AppThunk => + (dispatch) => { dispatch(setAppStatusAC('loading')) todolistsAPI .createTask(todolistId, title) @@ -151,8 +143,8 @@ export const updateTaskTC = taskId: string, domainModel: UpdateDomainTaskModelType, todolistId: string - ) => - (dispatch: ThunkDispatch, getState: () => AppRootStateType) => { + ): AppThunk => + (dispatch, getState: () => AppRootStateType) => { const state = getState() const task = state.tasks[todolistId].find((t) => t.id === taskId) if (!task) { @@ -210,6 +202,3 @@ type ActionsType = | RemoveTodolistActionType | SetTodolistsActionType | ReturnType -type ThunkDispatch = Dispatch< - ActionsType | SetAppStatusActionType | SetAppErrorActionType -> diff --git a/src/features/TodolistsList/todolists-reducer.ts b/src/features/TodolistsList/todolists-reducer.ts index 2ac4118..cfde4a3 100644 --- a/src/features/TodolistsList/todolists-reducer.ts +++ b/src/features/TodolistsList/todolists-reducer.ts @@ -1,11 +1,6 @@ import { todolistsAPI, TodolistType } from 'api/todolists-api' import { Dispatch } from 'redux' -import { - RequestStatusType, - SetAppErrorActionType, - setAppStatusAC, - SetAppStatusActionType, -} from 'app/app-reducer' +import { RequestStatusType, setAppStatusAC } from 'app/app-reducer' import { handleServerNetworkError } from 'utils/error-utils' import { AppThunk } from 'app/store' @@ -110,8 +105,8 @@ export const fetchTodolistsTC = (): AppThunk => { }) } } -export const removeTodolistTC = (todolistId: string) => { - return (dispatch: ThunkDispatch) => { +export const removeTodolistTC = (todolistId: string): AppThunk => { + return (dispatch) => { //изменим глобальный статус приложения, чтобы вверху полоса побежала dispatch(setAppStatusAC('loading')) //изменим статус конкретного тудулиста, чтобы он мог задизеблить что надо @@ -125,8 +120,8 @@ export const removeTodolistTC = (todolistId: string) => { }) } } -export const addTodolistTC = (title: string) => { - return (dispatch: ThunkDispatch) => { +export const addTodolistTC = (title: string): AppThunk => { + return (dispatch) => { dispatch(setAppStatusAC('loading')) todolistsAPI.createTodolist(title).then((res) => { dispatch(addTodolistAC(res.data.data.item)) @@ -158,6 +153,3 @@ export type TodolistDomainType = TodolistType & { filter: FilterValuesType entityStatus: RequestStatusType } -type ThunkDispatch = Dispatch< - ActionsType | SetAppStatusActionType | SetAppErrorActionType -> diff --git a/src/utils/error-utils.ts b/src/utils/error-utils.ts index 4917c83..18c9400 100644 --- a/src/utils/error-utils.ts +++ b/src/utils/error-utils.ts @@ -1,15 +1,10 @@ -import { - setAppErrorAC, - SetAppErrorActionType, - setAppStatusAC, - SetAppStatusActionType, -} from 'app/app-reducer' +import { setAppErrorAC, setAppStatusAC } from 'app/app-reducer' import { ResponseType } from 'api/todolists-api' import { Dispatch } from 'redux' export const handleServerAppError = ( data: ResponseType, - dispatch: Dispatch + dispatch: Dispatch ) => { if (data.messages.length) { dispatch(setAppErrorAC(data.messages[0])) @@ -21,7 +16,7 @@ export const handleServerAppError = ( export const handleServerNetworkError = ( error: { message: string }, - dispatch: Dispatch + dispatch: Dispatch ) => { dispatch(setAppErrorAC(error.message ? error.message : 'Some error occurred')) dispatch(setAppStatusAC('failed'))