компонент не рендерится на реквизит изменить редукс реагировать

Question

Мой компонент с фильтрами не перерисовывается после изменений в состоянии Redux. С console.log() я вижу, что действие и редуктор работают. ObjectFilter. js после изменений дает хороший результат с консолью, но не выполняет повторную визуализацию.

mapReducer. js

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

export default mapReducer;

mapActions. js

export const setFilters = (el, old_filters) => {
    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: filters
        })
    }
}

objectFilters. js

class ObjectFilters extends Component {


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

    render () {
        console.log(this.props.filters)
        return (
        /* some code */
    );}
}

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

Проблема в вашем коде заключается в том, что вы изменяете old_filters напрямую, вместо этого создаете его клон, а затем обновляете значение фильтра. Никогда не изменяйте состояние и поддерживайте напрямую

export const setFilters = (el, old_filters) => {
    let filters = {...old_filters}; // using spread operator to create a clone
    let new_el = !old_filters[el];
    filters[el] = new_el;

    return (dispatch, getState) => {
        dispatch({
            type:actions.SET_FILTERS,
            filters: filters
        })
    }
}