REDUX: Попытка добавить инкремент и уменьшитель, но это не сработает

Question

action-types. js

export const INCREMENT_WIDGET_COUNT = "INCREMENT_WIDGET_COUNT"
export const DECREMENT_WIDGET_COUNT = "DECREMENT_WIDGET_COUNT"

reduxActions. js

    export function incrementWidgetCount(){
  return { type: INCREMENT_WIDGET_COUNT}
}

export function decrementWidgetCount(){
  return { type: DECREMENT_WIDGET_COUNT}
}

reduxReducer. js

    const initialState = {
    renderedEl: {
        heimdall: false,
        skadi: false,
        mercator: false
    },
    layoutInitialAppSelected: false,
    selectedAppToRender: "",
    numberOfWidgets:0
}

    function rootReducer(state = initialState, action) {

        if (action.type === RENDER_LAYOUT_ELEMENT) {
            return { ...state, renderedEl: { ...state.renderedEl, ...action.payload } };
        } else if (action.type === TRIGGER_FIRST_WIDGET_SELECT_LAYOUT) {
            return { ...state, layoutInitialAppSelected: action.payload }
        } else if (action.type == SELECTED_APP_TO_RENDER) {
            return { ...state, selectedAppToRender: action.payload }
        } else if(action.type == INCREMENT_WIDGET_COUNT){
            return state.numberOfWidgets + 1;
        }else if(action.type == DECREMENT_WIDGET_COUNT){
            return state.numberOfWidgets - 1;
        }

        return state
    }

Вот как мой Редукс код в настоящее время работает. Я хотел создать инкремент и дециметр для state.numberOfWidgets. Так что теперь в моем приложении я называю это так:

import {  incrementWidgetCount, decrementWidgetCount } from "../redux/actions/reduxActions.js"

function mapDispatchToProps(dispatch) {
return {
    incrementWidgetCount: element => dispatch(incrementWidgetCount(element))
    decrementWidgetCount: element => dispatch(decrementWidgetCount(element))
}

}

А затем в функции, в конце я просто делаю:

this.props.incrementWidgetCount();

И затем, когда происходит сбой приложения с совершенно не связанной ошибкой, связанной с неопределенностью this.props.renderedEl.skadi, происходит сбой в другом файле js, где он работает должным образом, пока я не вызову функцию увеличения или уменьшения.

Что происходит?

РЕДАКТИРОВАТЬ: я сделал это, приложение теперь не будет cra sh, но оно не увеличивает число

else if(action.type == INCREMENT_WIDGET_COUNT){
    return { ...state, numberOfWidgets: { ...state.numberOfWidgets, ...state.numberOfWidgets +1}}
}

РЕДАКТИРОВАТЬ: Это как я читаю магазин у меня есть это в начале, перед классом

    const mapStateToProps = state => {
    return { 
        renderedEl: state.renderedEl,
        selectedAppToRender: state.selectedAppToRender,
        layoutInitialAppSelected: state.layoutInitialAppSelected,
        numberOfWidgets: state.numberOfWidgets }
}

А потом в конце этой части я читаю магазин

 closeAddModal = (el) => {
    var elementName = el.target.getAttribute('name');

    var element = {
        "heimdall": "a",
        "skadi": "b",
        "mercator": "c"
    }

    var layouts = this.state.layouts;


    layouts.lg.push({ i: element[elementName], x: 6, y: 0, w: 6, h: 6.45 })
    layouts.md.push({ i: element[elementName], x: 5, y: 0, w: 5, h: 4.35 })
    layouts.sm.push({ i: element[elementName], x: 0, y: 5, w: 6, h: 4.55 })
    layouts.xs.push({ i: element[elementName], x: 0, y: 3.5, w: 4, h: 3.40 })
    layouts.xxs.push({ i: element[elementName], x: 0, y: 2.5, w: 2, h: 2.35 })

    this.setState({
        layouts: layouts
    }, () => {
        console.log(this.state.layouts)
        this.setState({
            addAppModal: false
        }, () => {
            var renderedEls = this.props.renderedEl;
            for (let key in renderedEls) {
                if (key == elementName) {
                    renderedEls[key] = true
                }
            }

            this.props.renderLayoutElement(renderedEls);
            this.props.triggerFirstWidgetSelectLayout(true);

            console.log("counter before increment")
            console.log(this.props.numberOfWidgets) //0
            this.props.incrementWidgetCount();
            console.log("counter after increment")
            console.log(this.props.numberOfWidgets) //0
        })

    }
    )

}

Answer 1

Тип исправлен путем импорта магазина в файл .jsx и использования

        console.log("counter before increment")
            console.log(this.props.numberOfWidgets) //0
            this.props.incrementWidgetCount();
            console.log("counter after increment")
            console.log(this.props.numberOfWidgets) //0
            console.log(store.getState().numberOfWidgets) //this returns 1

Я не знаю, есть ли лучший способ

РЕДАКТИРОВАТЬ: Нашел лучший способ. Использование сделал обновление и затем чтение состояния

if(this.state.numberOfWidgets != this.props.numberOfWidgets){
        // console.log("pre set state")
        // console.log(this.state.numberOfWidgets)
        this.setState({
            numberOfWidgets: this.props.numberOfWidgets
        }, () => {
              console.log("post set state number of widgets")
              console.log(this.state.numberOfWidgets)
        })
    }

Answer 2

После редактирования вы по какой-то причине сохраняете предыдущее значение в магазине, меняете его на

---

return { ...state, numberOfWidgets: state.numberOfWidgets +1}

---

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