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 ответов

56 просмотров

Как в редьюсере выполняется 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

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

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

30500 за редактор? )
Владимир
47
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
Ребят в СИ можно реализовать ООП?
Николай
33
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Он в одиночку это дело запилил или была какая-то команда?
Aquinary
12
~ 2m21s  nix shell github:nixos/nixpkgs#stack ~  stack ghc -- --version error: … while calling the 'derivationStrict' builtin at /builtin/derivation.nix:...
Rebuild your mind.
6
Oh sorry did you want it in Gunter's chains?
Martin Rys
15
Всем привет, нужна как никогда, нужна помощь с IO в загрузчике. Пишу в code16 после установки сегментных регистров, пишу вывод символа. Пробовал 2 варианта: # 1 mov $0x0E, %a...
Shadow Akira
14
Подскажите пожалуйста, как в CustomDrawCell(Sender: TcxCustomGridTableView; ACanvas: TcxCanvas; AViewInfo: TcxGridTableDataCellViewInfo; var ADone: Boolean); получить наз...
A Z
7
Всем привет! Имеется функция: function IsValidChar(ch: UTF8Char): Boolean; var i: Integer; ValidChars: AnsiString; begin ValidChars := 'abcdefghijklmnopqrstuvwxyzABCDE...
Евгений
44
Карта сайта