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
})
}
)
}