More than one state property change in redux

Viewed 2431

I was using redux to check how it scales with my application. There are few things, that I found as roadblock when I was using it. There are high possibility that I am not thinking the redux way / not using the way it was supposed to be used or have not read the doc properly. I have read the basic section this docs.

The problem statement is fairly simple. I have two property in store

{
    x: 10, 
    y: 20
}

lets say x is the x-position of the point and y is the y-position of the point. There is one condition if the x goes above 50, y value becomes equal to x.

So I have this

let x = (state = 10, action ) => {
    if (action.type === 'cx') {
        return action.value;
    }
    else {
        return state;
    }
}

let y = (state = 20, action ) => {
    if (action.type === 'cy') {
        return action.value;
    }
    else {
        return state;
    }
}

let model = redux.combineReducers({x: x, y: y});
let store = redux.createStore(model);

let actions = {
    changeX: (val) => {
        if ( val > 50) {
            store.dispatch(actions.changeY(val));
        }
        return {type: 'cx', value: val }
    },
    changeY: (val) => ({type: 'cy', value: val })
}

console.log('INITIAL STATE', '---', store.getState());

store.subscribe(() => {
    console.log('SUB2', '---', store.getState());
    // Paint the dom with new state
});

So the moment

store.dispatch(actions.changeX(60));

is called the subscriber's function gets called twice hence the two times dom painting happen.

Is there a redux-way / workaround to solve this?

1 Answers
Related