Фильтрация массива объектов в Redux

Основная проблема: два компонента подключены к магазину Redux. Один компонент выполняет повторную визуализацию, а другой — нет при изменении состояния.

Я использую react-redux. У меня есть родительский компонент с именем CART и два дочерних элемента:

• Фильтр, который представляет собой div, где пользователь может выбирать различные критерии (цвет, размер, пол...)
• Товары, в которых представлен список обуви

CART.jsx

render() {
    console.log(this.props.filterCart, 'CART')
    const { products, error, pending } = this.props.products
    if (!this.shouldComponentRender()) return <LoadingSpinner />
    return (
        <section className="products_container">
            <Filter />
            {!this.shouldComponentRender() ? (
                <LoadingSpinner />
            ) : (
                <Products
                    products={products}
                    filterCart={this.props.filterCart}
                />
            )}
            {this.props.filterCart[0].value.length > 0 && <h1> hello </h1>}
        </section>
    )
}

const mapStateToProps = state => {
    return {
        products: state.products,
        filterCart: state.filter
    }
}

Мой компонент CART и компонент Filter подключены к моему магазину Redux. Каждый раз, когда пользователи выбирают критерий в компоненте «Фильтр», он отправляется и обновляется в редюсере. Мои рассылки устанавливаются в компоненте «Фильтр».

Я поместил console.log(this.props.filterCart) в render() в своих компонентах CART и Filter. Что я заметил, так это то, что каждый раз, когда выбирается критерий, мой компонент Filter регистрирует изменения, а компонент CART — нет. CART отображает журналы только один раз, и на выходе получается пустой объект. CART не обновляется после внесения изменений.

Для моего второго теста я поместил это в CART & Filter:

{this.props.filterCart[0].value.length > 0 && <h1> hello </h1>}

Всякий раз, когда выбран критерий, мой фильтр отображает "hello", поскольку критерий был добавлен в исходный пустой массив, а CART - нет.

Я провел небольшое исследование и, видимо, это могло быть связано с тем, что я мог изменить начальное состояние в редюсере, что неверно. Но я не уверен, потому что Filter реагирует на изменение.

Это мой код редуктора:

Reducer.js

let filterCriteria = [
    {
        field: 'gender',
        value: []
    },
    {
        field: 'color',
        value: []
    }
]

const filter = (state = filterCriteria, action) => {
    switch (action.type) {
        case FILTER_CRITERIA.FILTER_PRODUCTS_BY_GENDER:
            if (action.indice === true) {
                state[0].value = state[0].value.concat(action.value)
            } else {
                state[0].value = state[0].value.filter(
                    element => element != action.value
                )
            }
            break

        case FILTER_CRITERIA.FILTER_PRODUCTS_BY_COLOR:
            if (action.indice === true) {
                state[1].value = state[1].value.concat(action.value)
            } else {
                state[1].value = state[1].value.filter(
                    element => element != action.value
                )
            }
            break
    }
    return state
}

Просто для уточнения: когда критерий выбран в фильтре (поле ввода отмечено), критерий добавляется в соответствующее поле. Когда я снимаю флажок, он возвращает фильтр без ожидаемого значения. Таким образом, у меня нет никаких проблем с моими редюсерами по этому поводу.

Мои проблемы в том, почему мой второй компонент не перерисовывается.

У вас есть идеи, что может быть не так?

Большое спасибо!