Commit d4ec6f02 authored by Nurasyl's avatar Nurasyl

update async redux

parent a01fa831
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 {
......
......@@ -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
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
}
});
......
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment