Вопрос пользователя:
import { ProfileOrdersUI } from '@ui-pages';
import { TOrder } from '@utils-types';
import { FC, useEffect } from 'react';
import { useDispatch, useSelector } from '../../services/store';
import ordersSlice from '../../services/slices/ordersSlice';
import { getOrders } from '../../services/slices/ordersSlice';
export const ProfileOrders: FC = () => {
/** TODO: взять переменную из стора */
// const orders: TOrder[] = [];
const orders: TOrder[] = useSelector(ordersSlice.selectors.getOrdersSelector);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getOrders());
}, [dispatch]);
return <ProfileOrdersUI orders={orders} />;
};
import {
createSlice,
createAsyncThunk,
PayloadAction,
createSelector,
isAction
} from '@reduxjs/toolkit';
import { TOrder } from '@utils-types';
import { getOrdersApi, getOrderByNumberApi } from '../../utils/burger-api';
export const getOrders = createAsyncThunk(
'orders/getOrders', async () =>
getOrdersApi()
);
export const getOrderByNumber = createAsyncThunk(
'order/getOrderByNumber',
async (number: number) => getOrderByNumberApi(number)
);
type TUserOrdersState = {
orders: TOrder[];
order: TOrder | null;
loading: boolean;
error?: string | null;
};
export const initialState: TUserOrdersState = {
orders: [],
order: null,
loading: false,
error: ''
};
export const ordersSlice = createSlice({
name: 'order',
initialState: initialState,
reducers: {},
extraReducers(builder) {
builder
.addCase(getOrders.pending, (state) => {
state.orders = [];
state.loading = true;
state.error = null;
})
.addCase(getOrders.fulfilled, (state, action) => {
state.loading = false;
state.orders = action.payload;
state.error = null;
})
.addCase(getOrders.rejected, (state, action) => {
state.orders = [];
state.loading = false;
state.error = 'Ошибка';
})
.addCase(getOrderByNumber.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(getOrderByNumber.fulfilled, (state, action) => {
state.loading = false;
state.order = action.payload.orders[0];
state.error = null;
})
.addCase(getOrderByNumber.rejected, (state, action) => {
state.order = null;
state.loading = false;
state.error = 'Ошибка';
});
},
selectors: {
getOrderByNumberSelector: (state) => state.order,
getLoadingSelector: (state) => state.loading,
getOrdersSelector: (state) => state.orders
}
});
export const ordersSliceReducer = ordersSlice.reducer;
export default ordersSlice;
В чем ошибка? const orders: TOrder[] = useSelector(ordersSlice.selectors.getOrdersSelector); пишет Ни одна перегрузка не соответствует этому вызову.
Перегрузка 1 из 2, "(selector: (state: { ingredients: TIngredientState; burgers: TBurgerState; feeds: TBurgerState; user: TUserState; order: TOrderState; orders: TUserOrdersState; }) => TOrder[], equalityFn?: EqualityFn<...> | undefined): TOrder[]", возвратила следующую ошибку.
Аргумент типа "Selector<{ order: TUserOrdersState; }, TOrder[], []> & { unwrapped: (state: TUserOrdersState) => TOrder[]; }" нельзя назначить параметру типа "(state: { ingredients: TIngredientState; burgers: TBurgerState; feeds: TBurgerState; user: TUserState; order: TOrderState; orders: TUserOrdersState; }) => TOrder[]".
Типы параметров "state" и "state" несовместимы.
Тип "{ ingredients: TIngredientState; burgers: TBurgerState; feeds: TBurgerState; user: TUserState; order: TOrderState; orders: TUserOrdersState; }" не может быть назначен для типа "{ order: TUserOrdersState; }".
Типы свойства "order" несовместимы.
Свойство "orders" отсутствует в типе "TOrderState" и является обязательным в типе "TUserOrdersState".
Перегрузка 2 из 2, "(selector: (state: { ingredients: TIngredientState; burgers: TBurgerState; feeds: TBurgerState; user:
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
Ошибка возникает из-за того, что в useSelector вы передаете неправильный селектор. Вместо ordersSlice.selectors.getOrdersSelector нужно использовать ordersSlice.selectors.getOrdersSelector.unwrapped, чтобы получить доступ к конкретному селектору getOrdersSelector.
Исправленный код будет выглядеть следующим образом:
const orders: TOrder[] = useSelector(ordersSlice.selectors.getOrdersSelector.unwrapped);
После этого ошибка должна исчезнуть, и вы сможете получить доступ к списку заказов из стора.