update async redux

src/containers/ContactData/ContactData.tsx

 import React, { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import axiosBurger from '@/config/axiosBurger';
 import { Button } from "@/components/UI/Button/Button";
 import { TContactData } from '@/interfaces/contactData';
 import { Modal } from '@/components/UI/Modal/Modal';
 import { Spinner } from '@/components/UI/Spinner/Spinner';
 import { useAppSelector } from '@/store';
+import { useAppDispatch } from '@/store';
+import { postOrder } from '@/store/orders.slice';
 import './ContactData.css';
 
 export const ContactData = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const {ingredints} = useAppSelector(state => state);
+  const dispatch = useAppDispatch();
+  const {ingredints, orders: {isLoading}} = useAppSelector(state => state);
   
-  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [showModal, setShowModal] = useState<boolean>(false);
   const [contactData, setContactData] = useState<TContactData>({
     name: "",
@@ -35,13 +36,11 @@ export const ContactData = () => {
     const order = {
       ingredints,
       contactData,
-      price: location.state.price
+      price: 1950
     };
 
     if(allDataReq) {
-      setIsLoading(true);
-      await axiosBurger.post("orders.json", order);
-      setIsLoading(false);
+      dispatch(postOrder(order))
       setContactData(prevState => ({...prevState, name: "", street: "", postal: "", email: ""}));
       navigate({pathname: "/"});
     } else {

src/interfaces/order.ts

@@ -6,8 +6,16 @@ export interface IGetOrder<T> {
 };
 
 export type TOrder = {
-    id: string,
+    id?: string,
     contactData: TContactData,
     price: number,
-    ingredients: Ingredients
+    ingredints: Ingredients,
 };
+
+export type TOrderState = {
+    contactData: TContactData | null,
+    price: number | null,
+    ingredients: Ingredients | null,
+    isLoading: boolean,
+    error: null | Error
+}
\ No newline at end of file

src/store/index.ts

 import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import { ingredientsSlice } from "./ingredients.slice";
+import { ordersSlice } from "./orders.slice";
 
 export const store = configureStore({
     reducer: {
-        ingredints: ingredientsSlice.reducer
+        ingredints: ingredientsSlice.reducer,
+        orders: ordersSlice.reducer
     }
 });
 

src/store/orders.slice.ts

+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { TOrder, TOrderState } from "@/interfaces/order";
+import axiosBurger from "@/config/axiosBurger";
+
+const initialState: TOrderState = {
+    ingredients: null,
+    price: null,
+    contactData: null,
+    isLoading: false,
+    error: null
+};
+
+export const postOrder = createAsyncThunk(
+    "orders/postOrder",
+    async (order: TOrder) => {
+        try {
+            const data = await axiosBurger.post("orders.json", order)
+            return data
+        } catch (error: any) {
+            throw new Error(error)
+        }
+    }
+)
+
+export const ordersSlice = createSlice({
+    name: "orders",
+    initialState,
+    reducers: {
+
+    },
+    extraReducers: builder => {
+        builder
+        .addCase(postOrder.pending, (state) => {
+            state.isLoading = true
+            console.log("PENDING");
+            
+        })
+        .addCase(postOrder.rejected, (state, action) => {
+            state.isLoading = false
+            state.error = action.error as Error
+            console.log("REJECT");
+            
+        })
+        .addCase(postOrder.fulfilled, (state, action) => {
+            const {ingredients, price, contactData} = action.payload as any
+            console.log(action.payload, "FULFILLED");
+            
+            state.isLoading = false
+            state.ingredients = ingredients
+            state.contactData = contactData
+            state.price = price
+        })
+    }
+});
\ No newline at end of file