Повторная выборка данных с сервера с помощью react, redux toolkit и useEffect

Question

Есть код который при добавлении избранного товара добавляет его на сервер.Для обновления данных на странице я создал отдельный refetch файл в котором простая логика редакса, откуда достаются данные и помещаются в зависимость useEffect.Можно ли как то упростить зависимости для обновления данных или такой подход подойдет?

Тут достаются данные с бд избранное

Favorite.tsx

interface IFavorite {
    openFavorite: boolean,
    setOpenFavorite: (value: boolean) => void;
}

const Favorite: React.FC<IFavorite> = ({openFavorite, setOpenFavorite}) => {

    const { favoriteList } = useAppSelector(refetch);

    const dispatch = useAppDispatch();

    const favoriteItems = useAppSelector(favoriteItem);

    useEffect(() => {
        dispatch(favoriteFetch());
    },[favoriteList]);

    return (
        <div className={`${styles.favorite} ${openFavorite ? styles.active : ''}`}>
                                    <div className={styles.favoriteHead}>
                                        <div className={styles.favoriteHeadTitle}>Избранное</div>
                                        <div onClick={() => setOpenFavorite(false)} className={styles.favoriteHeadClose}>X</div>
                                    </div>
                                    <div className={styles.favoriteTd}>
                                    {favoriteItems.length <= 0 
                                        ? <div className={styles.favoriteTdEmpty}>
                                            Нет избранных товаров
                                        </div>
                                        : favoriteItems.map(item => <FavoriteProduct key={item.id} id={item.id} img={item.img} title={item.title} price={item.price}/>)}
                                    </div> 
                                </div>
    )
};

export default Favorite;

Тут товары добавляются в избранное Products.tsx

interface IProduct {
    id: string,
    img: string,
    title: string,
    price: number,
}

const Products: React.FC<IProduct> = ({id, img, title, price}) => {

    const favorite = useAppSelector(favoriteList(id));
    const cart = useAppSelector(cartList(id));

    const props = {id, img, title, price};

    const dispatch = useAppDispatch();

    const handleFavorite = () => {
        dispatch(addFavoriteRefetch({id, img, title, price}));
        
        if(favorite){
            dispatch(deleteFavoriteFetch(id))
        } else {
            dispatch(addFavoriteFetch(({id, img, title, price})))
        }     
    }

    const handleCart = () => {
        dispatch(addCartRefetch({id, img, title, price}))

        if(cart) {
            dispatch(updateCartFetch(cart));    
        } else {
            dispatch(addCartFetch({...props, count: 1}));
        }
        
    }
    
    return (
        <div className={styles.contentProducts}>
            <img onClick={handleFavorite} className={styles.contentProductsFavorite} src={favorite ? '/images/heartclick.png' : "/images/heart.png"} alt="" />
            <img className={styles.contentProductsImg} src={img} alt="" />
            <div className={styles.contentProductsOptions}>
                <div>
                    <p>{title}</p>
                    <div>Цена: {price} р.</div>
                </div>
                <button onClick={handleCart}>Добавить</button>  
            </div>
            
        </div>
    )
}

export default Products

Тут серверные запросы favoriteSlice.tsx

export const favoriteFetch = createAsyncThunk<IFavorite[]>(
    'favorite/favoriteFetch',
    async () => {
        const {data} = await axios.get<IFavorite[]>('http://localhost:3001/favorite');
        return data;
    }
) 

export const addFavoriteFetch = createAsyncThunk(
    'addFavorite/addFavoriteFetch',
    async (params: IFavorite) => {
        await axios.post('http://localhost:3001/favorite', params);
    }
)

export const deleteFavoriteFetch = createAsyncThunk(
    'deleteFavorite/deleteFavoriteFetch',
    async (id: string) => {
        await axios.delete(`http://localhost:3001/favorite/${id}`)
    }
)

const enum Status {
    LOADING = 'Loading',
    SUCCES = 'completed',
    ERROR = 'error',
}

interface IFavorite {
    id: string,
    img: string,
    title: string,
    price: number,
}

interface IFavorites {
    list: IFavorite[],
    status: Status,
}

const initialState: IFavorites = {
    list: [],
    status: Status.LOADING,
}

export const favoriteSlice = createSlice({
    name: 'favorite',
    initialState,
    reducers: {

    },
    extraReducers: (builder) => {
        builder.addCase(favoriteFetch.pending, (state) => {
            state.status = Status.LOADING;
        });
        builder.addCase(favoriteFetch.fulfilled, (state, action) => {
            state.list = action.payload;
            state.status = Status.SUCCES;
        });
        builder.addCase(favoriteFetch.rejected, (state) => {
            state.status = Status.ERROR;
        });
    },
});

export default favoriteSlice.reducer

БЛОГ НА HUSL

Повторная выборка данных с сервера с помощью react, redux toolkit и useEffect

Ответы (0 шт):