169 похожих чатов

Кто шарит за React? Проблема: при изменении состояния в хранилище Redux

компонент, который от него зависит, не перерисовывается. При вызове dispatch (который вызывается при onClick) в хранилище изменения происходят (проверено). Переменная, от которой зависит внешний вид компонента, меняется (я это проверил, выводя ее в consoleLog при onclick, куда добавлен и dispatch, который меняет состояние). Переменная получена с помощью хука useSelector (то есть ее изменения должны перерисовывать компонент). Кто может сказать, в чем тут проблема? Код компонента:

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux';

export default function BasketItem({item}) {
let basket = useSelector(state=>state.basket);
let g = basket.get(item);
const dispatch = useDispatch();
useEffect(()=>{
console.log("Корзина изменилась");
}, [g]);
return (
<div className="basket-item">
<img src={item.img} alt="Картинка ушла за хлебом" className="basket-item__img" />
<div className="basket-item__name">{item.name}</div>
<div className="basket-item__counter">
<img src="./images/mini/minus.svg"
alt="Картинка ушла за хлебом"
className="basket-item__minus"
onClick={()=>{dispatch({type: "removeProduct", payload: item}); console.log('Это g='+basket.get(item))}}
/>
<span className="basket-item__count">{basket.get(item)}</span>
<img className="basket-item__plus"
alt="Картинка ушла за хлебом"
src="./images/mini/plus.svg"
onClick={()=>dispatch({type: "addProduct", payload: item})}
/>
</div>
<div className="basket-item__price">{basket.get(item)*item.price + ' ₽'}</div>
</div>
)
}

6 ответов

14 просмотров

Как в редьюсере выполняется addProduct?

Артемий- Автор вопроса
Сергей
Как в редьюсере выполняется addProduct?

const defaultStateProducts = { priceFloor: 3990, priceCeiling: 139990, characteristics: ['color', 'memory', 'producer'], currentCategory: phone, choise: { memory: [], producer: [], color: [], type: [], }, productPage: 1, } const defaultState = { ...defaultStateProducts, doc: document, basket: new Map(), } const reducer = function(state = defaultState, act){ switch(act.type){ case 'changePriceFloor': console.log('change f'); return {...state, priceFloor: act.payload, productPage: 1} case 'changePriceСeiling': console.log('change c'); return {...state, priceCeiling: act.payload, productPage: 1} case 'addVariant': let c = act.payload.char; let v = act.payload.variant; if(state.choise[c].includes(v)) return state; let res = {...state, choise: {...state.choise, [c]: state.choise[c].concat(v)}, productPage: 1} console.log(res.choise.color); return res; case 'removeVariant': let c1 = act.payload.char; let v1 = act.payload.variant; return {...state, choise: {...state.choise, [c1]: state.choise[c1].filter(item=>item!==v1)}, productPage: 1} case 'changeCurrentCategory': return {...state, currentCategory: act.payload, choise: { memory: [], producer: [], color: [], type: [], },} case 'changePage': if(state.productPage<2 && act.payload<0) return state; if(state.productPage>= Math.ceil(state .currentCategory .filter(item=>matchFilter(item, state.choise, { floor: state.priceFloor, ceiling: state.priceCeiling, })) .length/6) &&act.payload>0) return state; return {...state, productPage: state.productPage + act.payload} case 'to1stPage': return {...state, productPage: 1} case 'setDefaultState': return {...state, ...defaultStateProducts}; case 'addProduct': console.log(state.basket.get(act.payload)); return ( state.basket.has(act.payload)? {...state, basket: state.basket.set(act.payload, state.basket.get(act.payload)+1)}: {...state, basket: state.basket.set(act.payload, 1)} ) case 'removeProduct': console.log(state.basket.get(act.payload)); if(state.basket.get(act.payload)===1) state.basket.delete(act.payload); return ( state.basket.get(act.payload)>1? {...state, basket: state.basket.set(act.payload, state.basket.get(act.payload)-1)}: {...state, basket: state.basket} ) default: console.log('default'); return state; } } Вот код редюсера

Артемий
const defaultStateProducts = { priceFloor: 399...

Пощади, можешь скрин прислать места где addProduct выполняется?

Артемий
const defaultStateProducts = { priceFloor: 399...

Первое что в глаза бросается, чего не сделаешь basket массивом?

Артемий- Автор вопроса
Сергей
Первое что в глаза бросается, чего не сделаешь bas...

каждому объекту надо сопоставить число, лучше всего для этого подходит map

Похожие вопросы

Обсуждают сегодня

А еще в перле можно уже @arr1 + @arr2?
Sergei Zhmylove
53
я не магистр хаскеля, но разве не может лейзи тип конвертнуться в не-лейзи запросив вычисление содержимого прям при инициализации?
deadgnom32 λ madao
100
Привет всем. появился вопрос. Разрабатываю сайт, в данный момент он запущен. Хостинг beget. Добавляю на сайт яндекс метрику с помощью полей client-settings (взято отсюда http...
Andrew
2
Подскажите, где смотреть результат выполнения программы? Код: ;.686 ;Система команд процессора 686 ;.MODEL FLAT,stdcall ;Модель памяти плоская, станда...
Егор Анелькин
5
Где в Астане можно купить мясо для шашлыков?
Dancing Іңұқәһүғө
21
;.686 ;Система команд процессора 686 ;.MODEL FLAT,stdcall ;Модель памяти плоская, стандартный ;вызов процедуры ;option casemap:no...
Егор Анелькин
1
Добрый день подскажите пожалуйста может кто то сталкивался с ошибками Sentry 22.10.0 развернутым из helm чарт в Kubernetes? Изначально 3 дня назад очень стало много событий ух...
Tire4 Finist Devops
1
всем привет почти закончил курс После него можно писать свою операционку? Какие библиотеки надо использовать и куда дальше копать для изучения
Linus
22
почому оно не работает?
Vi Chapmann ٩( 💢•̀ з•́)و Chapmann
19
Так а кто может спарсить всех участников чата? Идишники
Magic
18
Карта сайта