Вопрос пользователя:
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;
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) {
console.log('нужно авторизоваться');
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}
/>
);
}
dispatch(submitOrder(ingredientsId)); выдает ошибку , почему?Аргумент типа "AsyncThunkAction<TNewOrderResponse, string[], AsyncThunkConfig>" нельзя назначить параметру типа "UnknownAction".
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
Ошибка возникает из-за того, что вызов dispatch(submitOrder(ingredientsId)) не находится внутри функции компонента BurgerConstructor.
Для исправления ошибки, нужно переместить этот вызов внутрь функции компонента BurgerConstructor, например, внутрь функции onOrderClick:
const onOrderClick = () => {
if ( !user && !isAuthenticated) {
console.log( 'нужно авторизоваться') ;
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 )) ;
} ;
После этого вызов dispatch(submitOrder(ingredientsId)) будет выполнен при клике на кнопку заказа в компоненте BurgerConstructor.