From fdd25b79d78be7bb0fe772a26262b117c761a1d2 Mon Sep 17 00:00:00 2001 From: andres Date: Sat, 17 Aug 2024 20:26:48 +0200 Subject: [PATCH] chore: refactor store to use reducerPath instead of arbitrary names chore: refactor app reducer to export selectors --- src/app/App.tsx | 14 +++++++------- src/app/app-reducer.test.ts | 4 +++- src/app/app-reducer.ts | 11 ++++++++--- src/app/store.ts | 16 ++++++++-------- src/components/ErrorSnackbar/ErrorSnackbar.tsx | 7 ++----- src/features/Login/auth-reducer.ts | 4 +--- src/features/TodolistsList/tasks-reducer.test.ts | 4 ++-- src/features/TodolistsList/tasks-reducer.ts | 4 +--- .../TodolistsList/todolists-reducer.test.ts | 3 ++- src/features/TodolistsList/todolists-reducer.ts | 4 +--- .../todolists-tasks-reducer.test.ts | 7 +++++-- 11 files changed, 40 insertions(+), 38 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 5e99bae..61639a8 100644 --- a/src/app/App.tsx +++ b/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( - (state) => state.app.status - ) - const isInitialized = useSelector( - (state) => state.app.isInitialized - ) + const status = useSelector(selectAppStatus) + const isInitialized = useSelector(selectAppInitialized) const isLoggedIn = useSelector( (state) => state.auth.isLoggedIn ) diff --git a/src/app/app-reducer.test.ts b/src/app/app-reducer.test.ts index e43ad9a..046cb75 100644 --- a/src/app/app-reducer.test.ts +++ b/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, diff --git a/src/app/app-reducer.ts b/src/app/app-reducer.ts index 19cd335..1aefe7f 100644 --- a/src/app/app-reducer.ts +++ b/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) => { diff --git a/src/app/store.ts b/src/app/store.ts index a0bd109..4efa8a6 100644 --- a/src/app/store.ts +++ b/src/app/store.ts @@ -1,16 +1,16 @@ -import { tasksReducer } from 'features/TodolistsList/tasks-reducer' -import { todolistsReducer } from 'features/TodolistsList/todolists-reducer' +import { tasksSlice } from 'features/TodolistsList/tasks-reducer' +import { todolistsSlice } from 'features/TodolistsList/todolists-reducer' import { combineReducers } from 'redux' import { ThunkAction, ThunkDispatch } from 'redux-thunk' -import { appReducer } from './app-reducer' -import { authReducer } from 'features/Login/auth-reducer' +import { appSlice } from './app-reducer' +import { authSlice } from 'features/Login/auth-reducer' import { configureStore, UnknownAction } from '@reduxjs/toolkit' const rootReducer = combineReducers({ - tasks: tasksReducer, - todolists: todolistsReducer, - app: appReducer, - auth: authReducer, + [appSlice.reducerPath]: appSlice.reducer, + [tasksSlice.reducerPath]: tasksSlice.reducer, + [todolistsSlice.reducerPath]: todolistsSlice.reducer, + [authSlice.reducerPath]: authSlice.reducer, }) // ❗старая запись, с новыми версиями не работает diff --git a/src/components/ErrorSnackbar/ErrorSnackbar.tsx b/src/components/ErrorSnackbar/ErrorSnackbar.tsx index 8f0021c..54d9ab7 100644 --- a/src/components/ErrorSnackbar/ErrorSnackbar.tsx +++ b/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 { setAppError } from 'app/app-reducer' +import { selectAppError, 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( ) export function ErrorSnackbar() { - const error = useSelector( - (state) => state.app.error - ) + const error = useSelector(selectAppError) const dispatch = useDispatch() const handleClose = ( diff --git a/src/features/Login/auth-reducer.ts b/src/features/Login/auth-reducer.ts index 782a5f0..828dbe5 100644 --- a/src/features/Login/auth-reducer.ts +++ b/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 diff --git a/src/features/TodolistsList/tasks-reducer.test.ts b/src/features/TodolistsList/tasks-reducer.test.ts index 3ee46e2..0fe20de 100644 --- a/src/features/TodolistsList/tasks-reducer.test.ts +++ b/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' diff --git a/src/features/TodolistsList/tasks-reducer.ts b/src/features/TodolistsList/tasks-reducer.ts index a7e1faf..d50da14 100644 --- a/src/features/TodolistsList/tasks-reducer.ts +++ b/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 = diff --git a/src/features/TodolistsList/todolists-reducer.test.ts b/src/features/TodolistsList/todolists-reducer.test.ts index 5260773..ef406cb 100644 --- a/src/features/TodolistsList/todolists-reducer.test.ts +++ b/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 = [] +const todolistsReducer = todolistsSlice.reducer beforeEach(() => { todolistId1 = v1() diff --git a/src/features/TodolistsList/todolists-reducer.ts b/src/features/TodolistsList/todolists-reducer.ts index 139ae5e..b96add2 100644 --- a/src/features/TodolistsList/todolists-reducer.ts +++ b/src/features/TodolistsList/todolists-reducer.ts @@ -12,7 +12,7 @@ export type TodolistDomain = Todolist & { const initialState: Array = [] -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')) diff --git a/src/features/TodolistsList/todolists-tasks-reducer.test.ts b/src/features/TodolistsList/todolists-tasks-reducer.test.ts index 4c882b1..b475534 100644 --- a/src/features/TodolistsList/todolists-tasks-reducer.test.ts +++ b/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 = []