chore: refactor app reducer to use rtk

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'
-
+import { AppThunk } from 'app/store'
-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 }
-  }
-}
 
 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) =>
+const initialState: InitialStateType = {
-  ({ type: 'APP/SET-ERROR', error }) as const
+  status: 'idle',
-export const setAppStatusAC = (status: RequestStatusType) =>
+  error: null,
-  ({ type: 'APP/SET-STATUS', status }) as const
+  isInitialized: false,
-export const setAppInitializedAC = (value: boolean) =>
+}
-  ({ type: 'APP/SET-IS-INITIALIED', value }) as const
 
-export const initializeAppTC = () => (dispatch: Dispatch) => {
+const appSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    setAppErrorAC(state, action: PayloadAction<string | null>) {
+      return { ...state, error: action.payload }
+    },
+    setAppStatusAC(state, action: PayloadAction<RequestStatusType>) {
+      return { ...state, status: action.payload }
+    },
+    setAppInitializedAC(state, action: PayloadAction<boolean>) {
+      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<typeof setAppErrorAC>
-export type SetAppStatusActionType = ReturnType<typeof setAppStatusAC>
-
-type ActionsType =
-  | SetAppErrorActionType
-  | SetAppStatusActionType
-  | ReturnType<typeof setAppInitializedAC>

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 { AppRootStateType, AppThunk } from 'app/store'
-import {
+import { setAppStatusAC } from 'app/app-reducer'
-  SetAppErrorActionType,
-  setAppStatusAC,
-  SetAppStatusActionType,
-} from 'app/app-reducer'
 import {
   handleServerAppError,
   handleServerNetworkError,
@@ -103,8 +99,8 @@ export const setTasksAC = ({
 
 // thunks
 export const fetchTasksTC =
-  (todolistId: string) =>
+  (todolistId: string): AppThunk =>
-  (dispatch: Dispatch<ActionsType | SetAppStatusActionType>) => {
+  (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) =>
+  (title: string, todolistId: string): AppThunk =>
-  (
+  (dispatch) => {
-    dispatch: Dispatch<
-      ActionsType | SetAppErrorActionType | SetAppStatusActionType
-    >
-  ) => {
     dispatch(setAppStatusAC('loading'))
     todolistsAPI
       .createTask(todolistId, title)
@@ -151,8 +143,8 @@ export const updateTaskTC =
     taskId: string,
     domainModel: UpdateDomainTaskModelType,
     todolistId: string
-  ) =>
+  ): AppThunk =>
-  (dispatch: ThunkDispatch, getState: () => AppRootStateType) => {
+  (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<typeof setTasksAC>
-type ThunkDispatch = Dispatch<
-  ActionsType | SetAppStatusActionType | SetAppErrorActionType
->

src/features/TodolistsList/todolists-reducer.ts

@@ -1,11 +1,6 @@
 import { todolistsAPI, TodolistType } from 'api/todolists-api'
 import { Dispatch } from 'redux'
-import {
+import { RequestStatusType, setAppStatusAC } from 'app/app-reducer'
-  RequestStatusType,
-  SetAppErrorActionType,
-  setAppStatusAC,
-  SetAppStatusActionType,
-} 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) => {
+export const removeTodolistTC = (todolistId: string): AppThunk => {
-  return (dispatch: ThunkDispatch) => {
+  return (dispatch) => {
     //изменим глобальный статус приложения, чтобы вверху полоса побежала
     dispatch(setAppStatusAC('loading'))
     //изменим статус конкретного тудулиста, чтобы он мог задизеблить что надо
@@ -125,8 +120,8 @@ export const removeTodolistTC = (todolistId: string) => {
     })
   }
 }
-export const addTodolistTC = (title: string) => {
+export const addTodolistTC = (title: string): AppThunk => {
-  return (dispatch: ThunkDispatch) => {
+  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
->

src/utils/error-utils.ts

@@ -1,15 +1,10 @@
-import {
+import { setAppErrorAC, setAppStatusAC } from 'app/app-reducer'
-  setAppErrorAC,
-  SetAppErrorActionType,
-  setAppStatusAC,
-  SetAppStatusActionType,
-} from 'app/app-reducer'
 import { ResponseType } from 'api/todolists-api'
 import { Dispatch } from 'redux'
 
 export const handleServerAppError = <D>(
   data: ResponseType<D>,
-  dispatch: Dispatch<SetAppErrorActionType | SetAppStatusActionType>
+  dispatch: Dispatch
 ) => {
   if (data.messages.length) {
     dispatch(setAppErrorAC(data.messages[0]))
@@ -21,7 +16,7 @@ export const handleServerAppError = <D>(
 
 export const handleServerNetworkError = (
   error: { message: string },
-  dispatch: Dispatch<SetAppErrorActionType | SetAppStatusActionType>
+  dispatch: Dispatch
 ) => {
   dispatch(setAppErrorAC(error.message ? error.message : 'Some error occurred'))
   dispatch(setAppStatusAC('failed'))