通过引用赋值改变 redux 状态

Question

I have an app with a menu of items, and at some point a user may edit the values of the items. When the user does so, I create a copy of the item in a seperate state branch instead of changing the original menu items. So my reducer looks like this:

const menuReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_ITEM:
      return [...state, {id: action.itemId, propA: action.itemPropA, propB: action.itemPropB}]
  }
}

const editingMenuItem = (state = {}, action) => {
  switch (action.type) {
    case SET_EDIT_ITEM:
      return {id: action.id, propA: action.itemPropA, propB: action.itemPropB}
    case EDIT_ITEM:
      return {id: state.id, propA: action.itemPropA, propB: action.itemPropB}
  }
}

Someone selects that they want to edit an item, and this causes the dispatchEditItem thunk to trigger and create a copy in the state tree:

const dispatchEditItemThunk = itemId => (dispatch, getState) => {
  const item = _.find(getState().menu, ['id', itemId]);
  dispatch(setEditItem(item.id, item.propA, item.propB))
}

Then when someone wants to edit a prop, the editingThunk is dispatched:

const editingThunk = (itemId, propName) => (dispatch, getState) => {
  let activeItem = getState().editingMenuItem;
  // someValue is generated here
  activeItem[propName] = someValue
  dispatch(editItem(activeItem.propA, activeItem.propB))
}

The problem with this is that when activeItem[propName] = someValue happens, this changes the value of the item contained in the menuReducer array. I'm assuming because everything is pass by reference, and all the references lead back to the original value in the menuReducer. However, this isn't the way I would expect this to work. My assumption would be that calling getState would return a deep copy of the state, and not allow for these kinds of accidental mutations.

Is this a bug? If it isn't, is there a preferred way of writing thunks that avoids this kind of situation? In my real use case, the structure of the props in the menuItem is very complex, and it is handy to create an activeItem in the thunk and mutate it's values before dispatching to the state tree. Is doing this bad?

Answer 1

That's not a bug and mutating state object is highly discouraged. You can create a deep copy of an object using Object.assign and JSON.stringify methods as described here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign ( Examples section). If Redux was to create a deep copy of state on each dispatch call it could be more secure but also much slower.