Вопрос пользователя:
dispatch(submitOrder(ingredientsId)); Аргумент типа "AsyncThunkAction<TNewOrderResponse, string[], AsyncThunkConfig>" нельзя назначить параметру типа "UnknownAction".ts(2345)
код
import { FC, useMemo } from 'react';
import { TConstructorIngredient } from '@utils-types';
import { BurgerConstructorUI } from '@ui';
import { useSelector, useDispatch } from 'react-redux';
import burgerSlice from '../../services/slices/burgerSlice';
import { PayloadAction } from '@reduxjs/toolkit';
import orderSlice from '../../services/slices/orderSlice';
import userSlice from '../../services/slices/userSlice';
import { useNavigate } from 'react-router-dom';
import { submitOrder } from '../../services/slices/orderSlice';
import { get } from 'http';
export const BurgerConstructor: FC = () => {
/** TODO: взять переменные constructorItems, orderRequest и orderModalData из стора */
const constructorItemsIngredients = useSelector(
burgerSlice.selectors.getBurgerIngredientsSelector
);
const constructorItemsbun = useSelector(burgerSlice.selectors.getBunSelector);
const user = useSelector(userSlice.selectors.getUserSelector);
const isAuthenticated = useSelector(userSlice.selectors.getIsAuthenticatedSelector);
const dispatch = useDispatch();
const constructorItems = {
ingredients: constructorItemsIngredients,
bun: constructorItemsbun
};
const orderRequest = useSelector(orderSlice.selectors.getLoadingSelector);
// const orderRequest = false;
const orderModalData = useSelector(orderSlice.selectors.getOrderSelector);
const navigate = useNavigate();
const onOrderClick = () => {
if (!user && !isAuthenticated) {
return navigate('/login');}
if (!constructorItems.bun || orderRequest) return;
const bunId = constructorItems.bun ? constructorItems.bun._id : '';
const ingredientsId: string[] = [
bunId,
...constructorItems.ingredients.map(
(item: TConstructorIngredient) => item._id
)
];
dispatch(submitOrder(ingredientsId));
};
const closeOrderModal = () => {
dispatch(orderSlice.actions.clearBurgerOrder());
dispatch(burgerSlice.actions.clearBurger());
};
const price = useMemo(
() =>
(constructorItems.bun ? constructorItems.bun.price * 2 : 0) +
constructorItems.ingredients.reduce(
(s: number, v: TConstructorIngredient) => s + v.price,
0
),
[constructorItems]
);
// return null;
return (
<BurgerConstructorUI
price={price}
orderRequest={orderRequest}
constructorItems={constructorItems}
orderModalData={orderModalData}
onOrderClick={onOrderClick}
closeOrderModal={closeOrderModal}
/>
);
}
import {
createSlice,
createAsyncThunk,
PayloadAction,
createSelector,
isAction
} from '@reduxjs/toolkit';
import { TOrder } from '@utils-types';
import { orderBurgerApi } from '../../utils/burger-api';
export const submitOrder = createAsyncThunk(
'order/submit',
async (ingredients: string[], { rejectWithValue }) => {
try {
const reply = await orderBurgerApi(ingredients); // вызов функции для отправки запроса на сервер
if (!reply.success) {
return rejectWithValue(reply); // в случае неудачного ответа от сервера, вызываем rejectWithValue с ответом сервера
}
return reply; // возвращаем успешный ответ от сервера
} catch (error) {
return rejectWithValue("Ошибка"); // в случае ошибки при отправке запроса, вызываем rejectWithValue с сообщением об ошибке
}
}
);
type TOrderState = {
order: TOrder | null;
loading: boolean;
error?: string | null;
};
const initialState: TOrderState = {
order: null,
loading: false,
error: null
};
const orderSlice = createSlice({
name: 'order',
initialState,
reducers: {
clearBurgerOrder: (state) => {
state.order = null;
}
},
extraReducers: (builder) => {
builder
.addCase(submitOrder.pending, (state) => {
state.order = null;
state.loading = true;
state.error = null;
})
.addCase(submitOrder.fulfilled, (state, action) => {
state.order = action.payload.order;
state.loading = false;
state.error = null;
})
.addCase(submitOrder.rejected, (state, action) => {
state.loading = false;
state.error = "Ошибка";
})
},
selectors: {
getOrderSelector: (state) => state.order,
getLoadingSelector: (state) => state.loading,
getErrorSelector: (state) => state.error
}
});
export const orderSliceReducer = orderSlice.reducer;
export default orderSlice;
Как исправить
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
Ошибка возникает из-за того, что функция dispatch ожидает, что вы передадите ей действие типа UnknownAction, но вместо этого вы передаете ей действие типа AsyncThunkAction.
Для исправления этой ошибки вам нужно использовать dispatch с действием, которое возвращает submitOrder, а не сам submitOrder. Вы можете сделать это, вызвав submitOrder с аргументами и передав результат в dispatch.
Вот как вы можете исправить эту ошибку:
dispatch(submitOrder(ingredientsId) as PayloadAction<TNewOrderResponse>); Это приведет тип AsyncThunkAction к типу PayloadAction<TNewOrderResponse>, который ожидается функцией dispatch.
Пожалуйста, попробуйте этот подход и посмотрите, поможет ли он вам исправить ошибку.