Вопрос пользователя:
import {
createSlice,
createAsyncThunk,
PayloadAction,
createSelector
} from '@reduxjs/toolkit';
import { nanoid } from 'nanoid';
import { TIngredient } from '@utils-types';
import { getIngredientsApi } from '../../utils/burger-api';
type TIngredientState = {
ingredients: Array<TIngredient>;
loading: boolean;
error?: string | null;
};
const initialState: TIngredientState = {
ingredients: [],
loading: false,
error: ''
};
export const fetchIngredients = createAsyncThunk<TIngredient[]>(
'ingredients/getAll',
async () => getIngredientsApi()
);
const ingredientSlice = createSlice({
name: 'ingredients',
initialState,
reducers: {},
selectors: {
getIngredientsSelector: (state) => state.ingredients
},
extraReducers: (builder) => {
builder
.addCase(fetchIngredients.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(
fetchIngredients.fulfilled,
(state, action: PayloadAction<TIngredient[]>) => {
state.ingredients = action.payload;
state.loading = false;
}
)
.addCase(fetchIngredients.rejected, (state) => {
state.error = 'Ошибка при получении данных';
state.loading = false;
});
}
});
export const ingredientSliceReducer = ingredientSlice.reducer;
export const { getIngredientsSelector } = ingredientSlice.selectors;
используя селектор getIngredientsSelector: (state) => state.ingredients определить определенные переменные в компоненте: import { useState, useRef, useEffect, FC } from 'react';
import { useInView } from 'react-intersection-observer';
import { useSelector, useDispatch } from 'react-redux';
import { TTabMode } from '@utils-types';
import { BurgerIngredientsUI } from '../ui/burger-ingredients';
import { getIngredientsSelector } from '../../services/slices/ingredientSlice';
import { Preloader } from '../ui';
export const BurgerIngredients: FC = () => {
/** TODO: взять переменные из стора */
// const ingredients = useSelector(getIngredientsSelector);
const ingredients = useSelector(getIngredientsSelector);
const buns = ingredients.filter((ingredient) => ingredient.type === 'bun');
const mains = ingredients.filter((ingredient) => ingredient.type === 'main');
const sauces = ingredients.filter(
(ingredient) => ingredient.type === 'sauce'
);
// const buns = [];
// const mains = [];
// const sauces = [];
const [currentTab, setCurrentTab] = useState<TTabMode>('bun');
const titleBunRef = useRef<HTMLHeadingElement>(null);
const titleMainRef = useRef<HTMLHeadingElement>(null);
const titleSaucesRef = useRef<HTMLHeadingElement>(null);
const [bunsRef, inViewBuns] = useInView({
threshold: 0
});
const [mainsRef, inViewFilling] = useInView({
threshold: 0
});
const [saucesRef, inViewSauces] = useInView({
threshold: 0
});
useEffect(() => {
if (inViewBuns) {
setCurrentTab('bun');
} else if (inViewSauces) {
setCurrentTab('sauce');
} else if (inViewFilling) {
setCurrentTab('main');
}
}, [inViewBuns, inViewFilling, inViewSauces]);
const onTabClick = (tab: string) => {
setCurrentTab(tab as TTabMode);
if (tab === 'bun')
titleBunRef.current?.scrollIntoView({ behavior: 'smooth' });
if (tab === 'main')
titleMainRef.current?.scrollIntoView({ behavior: 'smooth' });
if (tab === 'sauce')
titleSaucesRef.current?.scrollIntoView({ behavior: 'smooth' });
};
// if (loading) {
// return <Preloader />;
// }
// if (!loading && error) {
// return (
// <p className="error">Запрос завершился с ошибкой: {error}</p>
// );
// }
// if (!loading && ingredients.length === 0) {
// return (
// <p> Нет ингредиентов</p>
// );
// }
// return null;
// return (
// <Preloader />
// )
return (
<BurgerIngredientsUI
currentTab={currentTab}
buns={buns}
mains={mains}
sauces={sauces}
titleBunRef={titleBunRef}
titleMainRef={titleMainRef}
titleSaucesRef={titleSaucesRef}
bunsRef={bunsRef}
mainsRef={mainsRef}
saucesRef={saucesRef}
onTabClick={onTabClick}
/>
);
};
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
import { useState, useRef, useEffect, FC } from 'react' ;
import { useInView } from 'react-intersection-observer' ;
import { useSelector, useDispatch } from 'react-redux' ;
import { TTabMode } from '@utils-types' ;
import { BurgerIngredientsUI } from '../ui/burger-ingredients' ;
import { getIngredientsSelector } from '../../services/slices/ingredientSlice' ;
import { Preloader } from '../ui' ;
export const BurgerIngredients: FC = () => {
const ingredients = useSelector(getIngredientsSelector) ;
const buns = ingredients.filter((ingredient) => ingredient.type === 'bun' ) ;
const mains = ingredients.filter((ingredient) => ingredient.type === 'main' ) ;
const sauces = ingredients.filter((ingredient) => ingredient.type === 'sauce' ) ;
const [currentTab, setCurrentTab] = useState<TTabMode>('bun') ;
const titleBunRef = useRef<HTMLHeadingElement>(null) ;
const titleMainRef = useRef<HTMLHeadingElement>(null) ;
const titleSaucesRef = useRef<HTMLHeadingElement>(null) ;
const [bunsRef, inViewBuns] = useInView({
threshold: 0
}) ;
const [mainsRef, inViewFilling] = useInView({
threshold: 0
}) ;
const [saucesRef, inViewSauces] = useInView({
threshold: 0
}) ;
useEffect(() => {
if (inViewBuns) {
setCurrentTab('bun') ;
} else if (inViewSauces) {
setCurrentTab('sauce') ;
} else if (inViewFilling) {
setCurrentTab('main') ;
}
}, [inViewBuns, inViewFilling, inViewSauces] ) ;
const onTabClick = (tab: string) => {
setCurrentTab(tab as TTabMode) ;
if ( tab === 'bun' )
titleBunRef.current?.scrollIntoView({ behavior: 'smooth' }) ;
if ( tab === 'main' )
titleMainRef.current?.scrollIntoView({ behavior: 'smooth' }) ;
if ( tab === 'sauce' )
titleSaucesRef.current?.scrollIntoView({ behavior: 'smooth' }) ;
} ;
return (
<BurgerIngredientsUI
currentTab ={currentTab}
buns ={buns}
mains ={mains}
sauces ={sauces}
titleBunRef ={titleBunRef}
titleMainRef ={titleMainRef}
titleSaucesRef ={titleSaucesRef}
bunsRef ={bunsRef}
mainsRef ={mainsRef}
saucesRef ={saucesRef}
onTabClick ={ on TabClick}
/>
) ;
} ;