Как изменить количество товара в корзине сохранённого в LocalStorage? Какие способы можно использовать?

Question

[Wares]

const cart  = useTypedSelector(state => state.cart)


   React.useEffect(() => {
    if (isMounted.current) {
      const json = JSON.stringify(cart);
      localStorage.setItem('cart', json);
    }
    isMounted.current = true;
  }, [cart]);

export const getCartFromLS = () => {
  const data = localStorage.getItem('cart');
  const items = data ? JSON.parse(data) : [];
  return items as ICart[]
};

- Store
- Reducers
- Cart:

import { ICart } from "../../../models/ICart"
import { actionTypes, TypeActionCart } from "../../../types/cart"
import { getCartFromLS } from "../../../utils/getLocalStorage";


const initialState: ICart[] = getCartFromLS();


 export default function cartReducer (state = initialState, action: TypeActionCart) {
 	switch (action.type) {
 		case actionTypes.CART_ADD_ITEM: 
        {
 			const cart = [...state]
 			const { product } = action.payload

 			const foundProduct = cart.find(item => item.id === product.id)

 			if (foundProduct) {
				foundProduct.count++ 
			} else {
				cart.push({
					...product,
					count: 1
				})
 			}
             return cart
        }
        case actionTypes.CART_MINUS_ITEM: 
		{ 
			const cart = [...state]
		  const foundProduct = cart.find(item => item.id === action.payload)
		  if (foundProduct) {
			foundProduct.count-- 

		}	
			return cart
		}
 		case actionTypes.CART_REMOVE_ITEM: {
 			return state.filter(item => item.id !== action.payload)
 		}
		case actionTypes.CART_CLEAR_ITEMS: 
		 {
			return state = []
		}
 		default:
 			return state
 	}
 }

Answer 1

[Alexandroppolus]

В редуксе такое обычно делают через middleware.

useEffect не очень подходит, потому что завязывает логику сохранения данных в LS на наличие отрендеренного компонента, в котором вызывается useEffect. Можно, конечно, этот компонент разместить в корне приложения, но всё равно так себе..