chore: refactor auth reducer to export selectors

src/app/App.tsx

@@ -3,7 +3,6 @@ import './App.css'
 import { TodolistsList } from 'features/TodolistsList/TodolistsList'
 import { ErrorSnackbar } from 'components/ErrorSnackbar/ErrorSnackbar'
 import { useDispatch, useSelector } from 'react-redux'
-import { AppRootState } from './store'
 import {
   initializeAppTC,
   selectAppInitialized,
@@ -11,7 +10,7 @@ import {
 } from './app-reducer'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { Login } from 'features/Login/Login'
-import { logoutTC } from 'features/Login/auth-reducer'
+import { logoutTC, selectIsLoggedIn } from 'features/Login/auth-reducer'
 import {
   AppBar,
   Button,
@@ -31,9 +30,7 @@ type Props = {
 function App({ demo = false }: Props) {
   const status = useSelector(selectAppStatus)
   const isInitialized = useSelector(selectAppInitialized)
-  const isLoggedIn = useSelector<AppRootState, boolean>(
+  const isLoggedIn = useSelector(selectIsLoggedIn)
-    (state) => state.auth.isLoggedIn
-  )
   const dispatch = useDispatch<any>()
 
   useEffect(() => {

src/features/Login/Login.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { useFormik } from 'formik'
 import { useSelector } from 'react-redux'
-import { loginTC } from './auth-reducer'
+import { loginTC, selectIsLoggedIn } from './auth-reducer'
-import { AppRootState } from 'app/store'
 import { Navigate } from 'react-router-dom'
 import { useAppDispatch } from 'hooks/useAppDispatch'
 import {
@@ -19,9 +18,7 @@ import {
 export const Login = () => {
   const dispatch = useAppDispatch()
 
-  const isLoggedIn = useSelector<AppRootState, boolean>(
+  const isLoggedIn = useSelector(selectIsLoggedIn)
-    (state) => state.auth.isLoggedIn
-  )
 
   const formik = useFormik({
     validate: (values) => {

src/features/Login/auth-reducer.ts

@@ -23,10 +23,13 @@ export const authSlice = createSlice({
       state.isLoggedIn = action.payload
     },
   },
+  selectors: {
+    selectIsLoggedIn: (state) => state.isLoggedIn,
+  },
 })
 
 export const { setIsLoggedIn } = authSlice.actions
-
+export const { selectIsLoggedIn } = authSlice.selectors
 // thunks
 export const loginTC =
   (data: LoginParams): AppThunk =>

src/features/TodolistsList/TodolistsList.tsx

@@ -22,6 +22,7 @@ import { AddItemForm } from 'components/AddItemForm/AddItemForm'
 import { Todolist } from './Todolist/Todolist'
 import { Navigate } from 'react-router-dom'
 import { useAppDispatch } from 'hooks/useAppDispatch'
+import { selectIsLoggedIn } from 'features/Login/auth-reducer'
 
 type Props = {
   demo?: boolean
@@ -32,9 +33,7 @@ export const TodolistsList: React.FC<Props> = ({ demo = false }) => {
     (state) => state.todolists
   )
   const tasks = useSelector<AppRootState, TasksState>((state) => state.tasks)
-  const isLoggedIn = useSelector<AppRootState, boolean>(
+  const isLoggedIn = useSelector(selectIsLoggedIn)
-    (state) => state.auth.isLoggedIn
-  )
 
   const dispatch = useAppDispatch()