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

17 просмотров

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

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

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

Anyone here suffers from unexplained aural migraines, who would be up for talking for a bit? Doesn't *have* to be aural, but I am not asking about headaches, I mean actual mi...
Martin Rys
55
Я тут за тем, чтобы задать вопрос, так как не знаю ассемблер, учу с/с++. Короче, насколько дорога операция перехода в функцию при ее вызове? Дело в том, что в с++ есть макросы...
Максим Рябцев
11
hello friends. Do you know how can I learn getx? I have a software project that I should deliver it up to 5 weeks later and I need to learn firebase too. I will be thankfull
AmirHossein Razavi
15
Доброе время суток! у меня тут иноды закончились. и понял почему по сути кстит, я периодически очищаю постгрес и сентри контайнер: postgres=# DELETE FROM nodestore_node WHER...
Юсиф Насиров
9
Привет, нужен совет старших товарищей. Есть глобальная переменная var DefaultDataFolder:string; инициализируем DefaultDataFolder:='a:\_OUT\'; есть примитивная процедур...
Max Otto
14
lazarus-3.2.0/gtk, linux патч "имя проекта по умолчанию project1 -> prj" день добрый не нравится "именя проекта по умолчанию" (project1), к.раз приходится переименовывать (н...
livontiy
5
Вопрос. Теоретический. Есть список команд. Команды отправляю в обработку некой функции, по очереди. Разные команды могут давать разные результаты после обработки. В зависимос...
Serjone
7
Коллеги, а в чём сейчас хорошо писать на перле, в смысле ide? Пробовал в идее с плагином, подсветка есть, даже какие-то предупреждения есть, но рефакторинга считай нет. Перене...
Дмитрий Петров
9
Can I forward ports (including the SSH port) between two machines without SSH? I know I can forward SSH server port from machine A (which blocks all requests by firewall) to ...
required optional
5
Всем вечера. Подскажите как лучше сделать. делаю на Д10 Например будет база данных на SQLite. в ней будет много таблиц. более 50шт Типа справочник. Содержать ID Name Id p...
Андрей Т 🐎
10
Карта сайта