Почему не устанавливается значение colorFilter в reducer'е?
Есть меню фильтров, где можно выбрать фильтры товаров в магазине: цену, цвет товара, тип и так далее... Логика простая: пользователь выбирает цвет - устанавливается значение colorFilter в state, в зависимости от этого параметра фильтруются products.
Здесь устанавливается значение colorFilter кликом пользователя по иконке:
const ColourMenuItem = ({ colourHex, color, setColorFilter }) => {
const handleClick = (e) => {
let color = e.currentTarget.getAttribute("id")
console.log(color)
setColorFilter(color)
debugger
}
return (
<div onClick={handleClick} id={color} style={{ backgroundColor: colourHex }} className="colourMenuItem"></div>
)
}
export default ColourMenuItem
Проблема в том, что функция (action creator), который меняет в редьюсере значение colorFilter - приходит в компоненту, но при этом не меняет значение colorFilter'а. Используя дебаггер, я понял, что параметр функции даже не попадает в редьюсер чтобы что-то изменить.
Не знаю в чем точно проблема, предполагаю, что проблема в том, что компоненты фильтров существуют в корневом элементе (state'e). Вот что я имею ввиду:
shopFilters: [
{
id: 3,
title: 'Colour',
isOptionOpen: false,
menuOptions: [
{
id: 1,
colourHex: '#000000',
color: 'black'
},
{
id: 2,
colourHex: '#34AADC',
color: 'blue'
},
{
id: 3,
colourHex: '#B0865B',
color: 'brown'
},
{
id: 4,
colourHex: '#F7E6A1',
color: 'beige'
},
{
id: 5,
colourHex: '#969495',
color: 'grey'
},
{
id: 6,
colourHex: '#26DC2B',
color: 'green'
},
{
id: 7,
colourHex: '#FD8603',
color: 'orange'
},
{
id: 8,
colourHex: '#F678B0',
color: 'pink'
},
{
id: 9,
colourHex: '#F1F03F',
color: 'yellow'
}
],
menu: <ColourMenu setColorFilter={setColorFilter}/>
},
],
Помогите, пожалуйста, решить проблему. Если нужно добавить код, пишите - добавлю. Заранее спасибо!