create slice and store

src/config/routes.tsx

@@ -1,12 +1,16 @@
 import { Routes, Route } from 'react-router-dom';
 import Layout from '../pages/Layout/Layout';
 import Main from '../pages/Main/Main';
+import Picture from '../pages/Picture/Picture';
+import Video from '../pages/Video/VideoPage';
 
 export default function AppRoutes(){
     return (
         <Routes>
             <Route path='/' element={<Layout />}>
                 <Route index element={<Main />} />
+                <Route path='picture' element={<Picture />} />
+                <Route path="video" element={<Video />} />
             </Route>
         </Routes>
     );

src/model/common.ts

@@ -2,4 +2,9 @@ export interface Request{
   id: number;
   text: string;
   files: File[];
+}
+
+export interface Response{
+  test: string;
+  files: File[];
 }

src/pages/Main/Main.tsx

@@ -1,10 +1,15 @@
 import styles from "./Main.module.css";
+import {useNavigate} from "react-router-dom";
 
 export default function Main() {
+  const navigate = useNavigate();
+
   return (
     <main className={styles.page}>
       <h1 className={styles.title}>Главная</h1>
       <p className={styles.text}>Базовая страница приложения готова.</p>
+      <button onClick={() => navigate('/picture')}>Go to Picture</button>
+      <button onClick={() => navigate('/video')}>Go to Video</button>
     </main>
   );
 }

src/pages/Picture/Picture.tsx

@@ -0,0 +1,8 @@
+
+export default function Picture() {
+    return (
+        <main>
+            <h1>Picture</h1>
+        </main>
+    );
+}

src/pages/Video/VideoPage.tsx

@@ -0,0 +1,6 @@
+
+export default function Video() {
+    return (
+        <div>video</div>
+    )
+}

src/services/service.ts

@@ -1 +1,16 @@
+import apiClient from "../config/client";
+import { Request, Response } from "../model/common";
 
+export async function createRequest(data: Request): Promise<Response> {
+  const formData = new FormData();
+
+  formData.append("id", data.id.toString());
+  formData.append("text", data.text);
+
+  data.files.forEach((file) => {
+    formData.append("files", file);
+  });
+
+  const response = await apiClient.post<Response>("/request", formData);
+  return response;
+}

src/store/slices/slice.ts

@@ -1 +1,62 @@
+import {Request, Response} from '../../model/common';
+import {createAsyncThunk, createSlice, PayloadAction} from '@reduxjs/toolkit';
+import {createRequest} from '../../services/service';
 
+interface RequestState {
+    files: File[];
+    text: string;
+    loading: boolean;
+    error: string | null;
+}
+
+const initialState: RequestState = {
+    files: [],
+    text: '',
+    loading: false,
+    error: null,
+};
+
+export const request = createAsyncThunk(
+    'request/create',
+    async (data: Request, {rejectWithValue}) => {
+        try{
+            const response = await createRequest(data);
+            return response;
+        } catch(error: any){
+            if(error.response?.data?.detail){
+                return rejectWithValue(error.response.data.detail);
+            } else {
+                return rejectWithValue(error instanceof Error ? error.message : "Ошибка создания запроса");
+            }
+        }
+    }
+)
+
+export const requestSlice = createSlice({
+    name:'requests',
+    initialState,
+    reducers: {
+        clearRequestError(state){
+            state.error = null;
+        }
+    },
+    extraReducers: (builder) => {
+        builder.addCase(request.pending, (state) => {
+            state.loading = true;
+            state.error = null;
+        })
+        builder.addCase(request.fulfilled, (state, action: PayloadAction<Response>) => {
+            state.loading = false;
+            state.error = null;
+            state.files = action.payload.files;
+        })
+        builder.addCase(request.rejected, (state, action) => {
+            state.loading = false;
+            state.error = (action.payload as string) || action.error.message || "Неизвестная ошибка";
+        })
+    }
+})
+
+export const {clearRequestError} = requestSlice.actions;
+
+export default requestSlice.reducer;

src/store/store.ts

@@ -1,9 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit'
-//import requestReducer from './slices/slice'
+import requestReducer from './slices/slice'
 
 export const store = configureStore({
   reducer: {
-    //request: requestReducer
+    request: requestReducer
   }
 });