Komponent nie re-renderuje się po zmianie stanu Redux React

Question

Mam 2 funkcje w Redux, jedna pobiera dane z bazy, a 2 aktualizuje filtry. Obie działają co widać po wynikach konsoli. Chciałbym jednak aby po wykonaniu tych funkcji moje komponenty, które wyświetlają informacje na podstawie tych danych zostały zre-renderowane, bo póki co wizualnie nic się nie zmienia...

mapAction.js

export const getObjects = () => {
    return (dispatch, getState) => {
        let array = [];

        fb.firestore().collection('obiekt').get().
        then(snapshot => {
            snapshot.forEach(async doc => {
                let element = doc.data();
                let id = doc.id;
                element = {
                    ...element,
                    id
                }
                array.push(element)
            })
        }).then(() => {
            dispatch({
                type: actions.GET_OBJECTS_SUCCESS,
                array
            })
        }).catch((err) => {
            dispatch({
                type: actions.GET_OBJECTS_FAILED
            })
        })
    }
}

export const setFilters = (el, old_filters) => {

    console.log("el",el)
    let filters = old_filters;
    let new_el = !old_filters[el];

    filters[el] = new_el;
    console.log(filters)
    return (dispatch, getState) => {
        dispatch({
            type:actions.SET_FILTERS,
            filters
        })
    }
}

mapReducer.js

const mapReducer = (state = initState, action) => {
    switch(action.type) {
        case actions.GET_OBJECTS_SUCCESS:
            console.log('GET_OBJECTS_SUCCESS')
            return({
                ...state,
                objectsMap: action.array
            })
        case actions.GET_OBJECTS_FAILED:
            console.log('GET_OBJECTS_FAILED')
            return({
                ...state
            })
        case actions.SET_FILTERS:
            console.log('SET_FILTERS', state)
            return({
                ...state,
                filters: action.filters
            })
        default:
            return state;
    }
}

i komponent wyświetlający filtry:
 

import React, { Component, useEffect } from 'react'

import styles from './objectFilters.module.css'

import ObjectFiltersElement from './objectFiltersElement/objectFiltersElement'

import { connect } from 'react-redux'
import { setFilters } from '../../store/actions/mapActions'

class ObjectFilters extends Component {


    changeFilterHandler = (el) => {
        this.props.setFilters(el, this.props.filters);
    }

    render () {
        return (
        <div className={styles.objectFiltersContainer}>
            {Object.keys(this.props.filters).map((el, i) => {
                return(
                    <ObjectFiltersElement 
                        key={i} 
                        name={el} 
                        active={this.props.filters[el]} 
                        changeFilterHandler={(el) => (this.changeFilterHandler(el))}
                        />
                )
            })}
        </div>
    );}
}

const mapDispatchToProps = dispatch => {
    return {
        setFilters: (el, filters) => dispatch(setFilters(el, filters))
    }
}

const mapStateToProps = state => {
    return {
        filters: state.mapRedux.filters
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ObjectFilters);

 

Answer 1

Problem polegał na tym, że działałem na stanie Redux, a nie na jego kopii.
Poprawnie wygląda to tak:

export const setFilters = (el, old_filters) => {
 
    console.log("el",el)
    let filters = {...old_filters};
    let new_el = !old_filters[el];
 
    filters[el] = new_el;
    console.log(filters)
    return (dispatch, getState) => {
        dispatch({
            type:actions.SET_FILTERS,
            filters
        })
    }
}