Как не вызывать получения данных из redux много раз?

Question

[SLien]

Смотрите вот мой код:

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getCategories } from '../../store/reducers/categories'
import { deleteGoods, getGoods } from '../../store/reducers/goods'
import './Items.scss'
import ItemsPopup from './ItemsPopup/ItemsPopup'
import ItemsRow from './ItemsRow'

const Items = () => {
	const [popupIsOpen, setPopupIsOpen] = useState(false)
	const [fastIsOpen, setFastIsOpen] = useState(false)
	const [selectedItems, setSelectedItems] = useState([])
	const [categoryData, setCategoryData] = useState([])
	const [goodsData, setGoodsData] = useState([])

	const goods = useSelector(s => s.goods)
	const users = useSelector(s => s.user)
	const categories = useSelector(s => s.categories)
	const dispatch = useDispatch()

	useEffect(() => {
		dispatch(getGoods())
		dispatch(getCategories())

		if (goods.status === 'success') {
			setGoodsData(
				goods?.data.filter(item => {
					return item.owner_id === users.user.owner_id
				})
			)
		}

		setCategoryData(
			categories.data.filter(item => {
				return item.owner_id === users.user.owner_id
			})
		)
	}, [goods.data])

	const handleSelectAll = () => {
		if (goodsData.length === 0) return

		if (selectedItems.length === goodsData.length) {
			setSelectedItems([])
		} else {
			setSelectedItems(goodsData.map(product => product.id))
		}
	}

	const handleSelectItem = id => {
		setSelectedItems(prev =>
			prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]
		)
	}

	const handleDeleteSelected = () => {
		selectedItems.forEach(id => dispatch(deleteGoods(id)))
		setSelectedItems([])
	}

	return (
		<div className='add'>
			<div className='add__top'>
				<h1 className='add__top__title'>Товары</h1>

				<div className='add__top__btns'>
					{/* <button
						className='add__top__btn'
						onClick={() => setFastIsOpen(!fastIsOpen)}
					>
						+ Быстрое добавление
					</button> */}

					<button
						className='add__top__btn'
						onClick={() => setPopupIsOpen(!popupIsOpen)}
					>
						+ Добавить новый
					</button>

					{selectedItems.length > 0 && (
						<button className='add__top__btn' onClick={handleDeleteSelected}>
							Удалить выбранные ({selectedItems.length})
						</button>
					)}
				</div>
			</div>
			<div className='add__content'>
				<div className='add__content__table'>
					<div className='add__content__table__header'>
						<div className='add__content__table__header__cell'>
							<input
								type='checkbox'
								checked={
									goodsData.length > 0 &&
									selectedItems.length === goodsData.length
								}
								onChange={handleSelectAll}
								disabled={goodsData.length === 0}
							/>
						</div>
						<div className='add__content__table__header__cell'>Ид</div>
						<div className='add__content__table__header__cell'>Штрихкод</div>
						<div className='add__content__table__header__cell'>Название</div>
						<div className='add__content__table__header__cell'>Категория</div>
						<div className='add__content__table__header__cell'>
							Цена прибытия
						</div>
						<div className='add__content__table__header__cell'>
							Цена продажи
						</div>
						<div className='add__content__table__header__cell'>Количество</div>
						<div className='add__content__table__header__cell'>Действия</div>
					</div>
					<div className='add__content__table__body'>
						{goodsData.map(product => (
							<ItemsRow
								key={product.id}
								product={product}
								isSelected={selectedItems.includes(product.id)}
								onSelect={handleSelectItem}
								goods={goodsData}
								categories={categoryData ? categoryData : []}
							/>
						))}

						{goodsData.length === 0 && (
							<div className='add__content__table__empty'>Нет товаров</div>
						)}
					</div>
				</div>
			</div>

			<ItemsPopup
				popupIsOpen={popupIsOpen}
				setPopupIsOpen={setPopupIsOpen}
				goods={goodsData}
				categories={categoryData ? categoryData : []}
				user={users.user}
			/>

			{/* <ItemsFastPopup
				fastIsOpen={fastIsOpen}
				setFastIsOpen={setFastIsOpen}
				goods={goodsData}
			/> */}
		</div>
	)
}

export default Items

Суть в том что я вызываю getGoods и допустим добавляю еще один товар надо его обновлять что бы новые данные вышли сразу а если делать как я то он вызывается по много раз и сайт начинает лагать.
Еще можете дать советы по коду?

Comments

[szQocks]

[goods.data] это лишнее

путь простой, когда ты отрисовываешь эти свои Items, получаем из стора продукты 1 раз и заносим их в локальный стейт, и работаем с этим локальным стейтом

но, если ты в локальном стейте изменяешь продукты которые получал из стора, - то в сторе их так же нужно изменить ( но заново их получать не нужно, у тебя уже есть эти продукты из стора в твоём стейте локальном )

хотя этого даже делать не надо, так как тут вообще юз эффект не нужен мб

вообще тут в сторе обновлять и не надо наверное даже, потому что когда ты добавляешь товар типа в корзину ( типа делаешь товар выбранным, надо его в localStorage заносить, и в этот компонент Items из localStorage получать эти товары выбранные, точнее их айдишники ) кароч долго объяснять

[szQocks]

const goods = useSelector(s => s.goods)
const [goodsData, setGoodsData] = useState(goods)

вот и всё, категории можно получить перед этими двумя строчками, и в useState занести с фильтрацией

[szQocks]

а может их вообще даже и в сторе не должно быть этих продуктов - скорее всего!

[SLien]

szQocks, У меня по факту они в redux сохраняться а не в local storage

[szQocks]

SLien, ну ты же когда заходишь на сайт, стор у тебя пустой верно ведь ? как ты сохранишь в нём товары которые чел добавил в корзину ? нужно товары которые чел добавил в корзину - хранить в localStorage минимум, максимум в бд