Почему не устанавливается значение 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}/>
        },
        
    ],

Помогите, пожалуйста, решить проблему. Если нужно добавить код, пишите - добавлю. Заранее спасибо!


Ответы (0 шт):