chore: refactor store to use reducerPath instead of arbitrary names

chore: refactor app reducer to export selectors

src/app/App.tsx

@@ -4,7 +4,11 @@ import { TodolistsList } from 'features/TodolistsList/TodolistsList'
 import { ErrorSnackbar } from 'components/ErrorSnackbar/ErrorSnackbar'
 import { useDispatch, useSelector } from 'react-redux'
 import { AppRootState } from './store'
-import { initializeAppTC, RequestStatus } from './app-reducer'
+import {
+  initializeAppTC,
+  selectAppInitialized,
+  selectAppStatus,
+} from './app-reducer'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { Login } from 'features/Login/Login'
 import { logoutTC } from 'features/Login/auth-reducer'
@@ -25,12 +29,8 @@ type Props = {
 }
 
 function App({ demo = false }: Props) {
-  const status = useSelector<AppRootState, RequestStatus>(
+  const status = useSelector(selectAppStatus)
-    (state) => state.app.status
+  const isInitialized = useSelector(selectAppInitialized)
-  )
-  const isInitialized = useSelector<AppRootState, boolean>(
-    (state) => state.app.isInitialized
-  )
   const isLoggedIn = useSelector<AppRootState, boolean>(
     (state) => state.auth.isLoggedIn
   )

src/app/app-reducer.test.ts

@@ -1,5 +1,5 @@
 import {
-  appReducer,
+  appSlice,
   InitialState,
   setAppError,
   setAppStatus,
@@ -7,6 +7,8 @@ import {
 
 let startState: InitialState
 
+const appReducer = appSlice.reducer
+
 beforeEach(() => {
   startState = {
     error: null,

src/app/app-reducer.ts

@@ -20,7 +20,7 @@ const initialState: InitialState = {
   isInitialized: false,
 }
 
-const appSlice = createSlice({
+export const appSlice = createSlice({
   name: 'app',
   initialState,
   reducers: {
@@ -34,11 +34,16 @@ const appSlice = createSlice({
       state.isInitialized = action.payload
     },
   },
+  selectors: {
+    selectAppError: (state) => state.error,
+    selectAppStatus: (state) => state.status,
+    selectAppInitialized: (state) => state.isInitialized,
+  },
 })
 
-export const appReducer = appSlice.reducer
-
 export const { setAppInitialized, setAppStatus, setAppError } = appSlice.actions
+export const { selectAppStatus, selectAppInitialized, selectAppError } =
+  appSlice.selectors
 
 export const initializeAppTC = (): AppThunk => (dispatch) => {
   authAPI.me().then((res) => {

src/app/store.ts

@@ -1,16 +1,16 @@
-import { tasksReducer } from 'features/TodolistsList/tasks-reducer'
+import { tasksSlice } from 'features/TodolistsList/tasks-reducer'
-import { todolistsReducer } from 'features/TodolistsList/todolists-reducer'
+import { todolistsSlice } from 'features/TodolistsList/todolists-reducer'
 import { combineReducers } from 'redux'
 import { ThunkAction, ThunkDispatch } from 'redux-thunk'
-import { appReducer } from './app-reducer'
+import { appSlice } from './app-reducer'
-import { authReducer } from 'features/Login/auth-reducer'
+import { authSlice } from 'features/Login/auth-reducer'
 import { configureStore, UnknownAction } from '@reduxjs/toolkit'
 
 const rootReducer = combineReducers({
-  tasks: tasksReducer,
+  [appSlice.reducerPath]: appSlice.reducer,
-  todolists: todolistsReducer,
+  [tasksSlice.reducerPath]: tasksSlice.reducer,
-  app: appReducer,
+  [todolistsSlice.reducerPath]: todolistsSlice.reducer,
-  auth: authReducer,
+  [authSlice.reducerPath]: authSlice.reducer,
 })
 
 // ❗старая запись, с новыми версиями не работает

src/components/ErrorSnackbar/ErrorSnackbar.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { AppRootState } from 'app/store'
+import { selectAppError, setAppError } from 'app/app-reducer'
-import { setAppError } from 'app/app-reducer'
 import { AlertProps, Snackbar } from '@mui/material'
 import MuiAlert from '@mui/material/Alert'
 
@@ -19,9 +18,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
 )
 
 export function ErrorSnackbar() {
-  const error = useSelector<AppRootState, string | null>(
+  const error = useSelector(selectAppError)
-    (state) => state.app.error
-  )
   const dispatch = useDispatch()
 
   const handleClose = (

src/features/Login/auth-reducer.ts

@@ -15,7 +15,7 @@ const initialState: InitialState = {
   isLoggedIn: false,
 }
 
-const authSlice = createSlice({
+export const authSlice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
@@ -25,8 +25,6 @@ const authSlice = createSlice({
   },
 })
 
-export const authReducer = authSlice.reducer
-
 export const { setIsLoggedIn } = authSlice.actions
 
 // thunks

src/features/TodolistsList/tasks-reducer.test.ts

@@ -2,11 +2,11 @@ import {
   addTask,
   removeTask,
   setTasks,
-  tasksReducer,
+  tasksSlice,
   TasksState,
   updateTask,
 } from './tasks-reducer'
-
+const tasksReducer = tasksSlice.reducer
 import { addTodolist, removeTodolist, setTodolists } from './todolists-reducer'
 import { TaskPriorities, TaskStatuses } from 'api/todolists-api'
 

src/features/TodolistsList/tasks-reducer.ts

@@ -33,7 +33,7 @@ export type TasksState = {
 
 const initialState: TasksState = {}
 
-const tasksSlice = createSlice({
+export const tasksSlice = createSlice({
   name: 'tasks',
   initialState,
   reducers: {
@@ -92,8 +92,6 @@ const tasksSlice = createSlice({
   },
 })
 
-export const tasksReducer = tasksSlice.reducer
-
 export const { removeTask, setTasks, updateTask, addTask } = tasksSlice.actions
 
 export const fetchTasksTC =

src/features/TodolistsList/todolists-reducer.test.ts

@@ -3,11 +3,11 @@ import {
   changeTodolistEntityStatus,
   changeTodolistFilter,
   changeTodolistTitle,
+  todolistsSlice,
   FilterValues,
   removeTodolist,
   setTodolists,
   TodolistDomain,
-  todolistsReducer,
 } from './todolists-reducer'
 import { v1 } from 'uuid'
 import { Todolist } from 'api/todolists-api'
@@ -16,6 +16,7 @@ import { RequestStatus } from 'app/app-reducer'
 let todolistId1: string
 let todolistId2: string
 let startState: Array<TodolistDomain> = []
+const todolistsReducer = todolistsSlice.reducer
 
 beforeEach(() => {
   todolistId1 = v1()

src/features/TodolistsList/todolists-reducer.ts

@@ -12,7 +12,7 @@ export type TodolistDomain = Todolist & {
 
 const initialState: Array<TodolistDomain> = []
 
-const todolistsSlice = createSlice({
+export const todolistsSlice = createSlice({
   name: 'todolists',
   initialState,
   reducers: {
@@ -72,8 +72,6 @@ export const {
   setTodolists,
 } = todolistsSlice.actions
 
-export const todolistsReducer = todolistsSlice.reducer
-
 export const fetchTodolistsTC = (): AppThunk => {
   return (dispatch) => {
     dispatch(setAppStatus('loading'))

src/features/TodolistsList/todolists-tasks-reducer.test.ts

@@ -1,11 +1,14 @@
 import {
   addTodolist,
   TodolistDomain,
-  todolistsReducer,
+  todolistsSlice,
 } from './todolists-reducer'
-import { tasksReducer, TasksState } from './tasks-reducer'
+import { tasksSlice, TasksState } from './tasks-reducer'
 import { Todolist } from 'api/todolists-api'
 
+const todolistsReducer = todolistsSlice.reducer
+const tasksReducer = tasksSlice.reducer
+
 test('ids should be equals', () => {
   const startTasksState: TasksState = {}
   const startTodolistsState: Array<TodolistDomain> = []