React update array state in Redux

Question

I am quite new with React and Redux. I manage to update existing item within an array with the following

case ACTION_TYPES.SET_PREPARATION_ITEM:
      const { id, x, y, rotation } = action.payload;
      const currentPreparationItem = state.entity.preparationItems[id];
      currentPreparationItem.x = x;
      currentPreparationItem.y = y;
      currentPreparationItem.rotation = rotation;
      return { ...state, preparationItems: { ...state.entity.preparationItems } };

Now I am trying to add new item into the array with the following code

case ACTION_TYPES.ADD_PREPARATION_ITEM:
      const implant: IProductMySuffix = action.payload;
      const preparationItem: IPreparationItemMySuffix = {};
      preparationItem.x = 10;
      preparationItem.y = 10;
      preparationItem.productId = implant.id;
      preparationItem.image = implant.image;
      preparationItem.imageContentType = implant.imageContentType;
      const result = { ...state, preparationItems: { ...state.entity.preparationItems.concat(preparationItem) } } 
      return result;

If I debug correctly, result const will have an array with one item. However the in the render method it does not seem to detect if the array has any elements. Any idea what might cause this ?

Added portion of my components

const mapStateToProps = (storeState: IRootState) => ({
  users: storeState.userManagement.users,
  customers: storeState.customer.entities,
  businesses: storeState.business.entities,
  products: storeState.product.entities,
  preparationEntity: storeState.preparation.entity,
  loading: storeState.preparation.loading,
  updating: storeState.preparation.updating,
  updateSuccess: storeState.preparation.updateSuccess
});

const mapDispatchToProps = {
  getUsers,
  getCustomers,
  getBusinesses,
  getEntity,
  getProducts,
  updateEntity,
  setBlob,
  createEntity,
  reset,
  setPreparationItem,
  addPreparationItem
};

Can you please post the mapstatetoprops, mapdispatchtoprops from your Component. — SelvaS
– SelvaS, Commented Jun 12, 2019 at 17:24
You haven't mapped preparationItems in mapStateToProps. Is that correct? — SelvaS
– SelvaS, Commented Jun 12, 2019 at 17:29
Why do you have 2 different places where you store preparationItems? state.preparationItems and state.entity.preparationItems — Radu Nemerenco
– Radu Nemerenco, Commented Jun 12, 2019 at 17:36

Radu Nemerenco · Accepted Answer · 2019-06-12 18:09:18Z

3

First of all, you're mutating the state, which is against redux's rules

case ACTION_TYPES.SET_PREPARATION_ITEM:
      const { id, x, y, rotation } = action.payload;
      const currentPreparationItem = {...state.entity.preparationItems[id]}; // create a new object instance
      currentPreparationItem.x = x;
      currentPreparationItem.y = y;
      currentPreparationItem.rotation = rotation;
      const entity = state.entity ? {...state.entity} : {};
      const preparationItems = entity.preparationItems ? [...entity.preparationItems] : [] // Create a new Array instance
      preparationItems[id] = currentPreparationItem;
      entity.preparationItems = preparationItems;
      return {
        ...state,
        entity
      };

Second: you're spreading preparationItems as an object, but it's actually an array (based on your question description)

case ACTION_TYPES.ADD_PREPARATION_ITEM:
      const implant: IProductMySuffix = action.payload;
      const preparationItem: IPreparationItemMySuffix = {};
      preparationItem.x = 10;
      preparationItem.y = 10;
      preparationItem.productId = implant.id;
      preparationItem.image = implant.image;
      preparationItem.imageContentType = implant.imageContentType;
      const entity = state.entity ? {...state.entity} : {};
      // Create a new Array instance and add the new object at the end
      entity.preparationItems = entity.preparationItems ? [
        ...entity.preparationItems,
        preparationItem
      ] : [preparationItem];
      const result = {
        ...state,
        entity
      } 
      return result;

edited Jun 12, 2019 at 18:09

answered Jun 12, 2019 at 17:28

Radu Nemerenco

6764 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Radu Nemerenco Over a year ago

I edited the answer to handle state.entity.preparationItems instead of state.preparationItems, since you, @abiieez answered via a comment that this is the right place for preparationItems

abiieez Over a year ago

so far so good, however now I get error during ADD_PREPARATION_ITEM. => Cannot access 'preparationItems' before initialization

Radu Nemerenco Over a year ago

I updated the answer to handle the undefined state.entity

Radu Nemerenco Over a year ago

Updated again to handle undefined state.entity.preparationItems also

abiieez Over a year ago

why theres this line entity.preparationItems = const result = { ...state, entity };. This gives me syntax error.

|

Collectives™ on Stack Overflow

React update array state in Redux

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related