How to change a value inside array of object in Redux

Question

I have stored an array of object in Redux State and inside each object there is a key named price. Now when I increment the quantity button I need to access the object that has the key inside redux and change the price value. I was able to do that but it's not working properly the price is being changed but a new object is being added in the state of Redux you can see it in the screenshot below. hope I was able to explain the problem clearly. if not please let know so I can explain more.

Cart Component

increment(e, item){
  let qty = e.target.previousElementSibling.textContent;
  qty++;
  e.target.previousElementSibling.textContent = qty;
  this.props.changePrice(item);
}

<div>
  <input onClick={(e) =>this.decrement(e)} type="submit" value="-"/>
  <span>1</span>
  <input onClick={(e) => this.increment(e, item)} type="submit" value="+"/>
</div>

function mapStateToProps(state){
   return({
     itemlist: state.rootReducer
   })
 }
function mapDispatchToProps(dispatch) {
   return({
      removeItem: (item)=>{
        dispatch({type: 'removeCart', payload: item})
      },
      changePrice: (item)=>{
        dispatch({type: 'changePrice', payload: item})
      }
   })
 }
export default connect(mapStateToProps, mapDispatchToProps)(Cart);

Reducer Component

const changePrice = (itemArray, item)=>{
  let newObject = {};
  let filteredObject = itemArray.filter(reduxItem => reduxItem.id === item.id);
  let newprice = filteredObject[0].price + filteredObject[0].price;
  filteredObject[0].price = newprice;
  newObject = filteredObject;
  const something = ([...itemArray, newObject]);
  return something;
}
const reducer = (state = [], action) =>{
  switch (action.type) {
    case 'Add':
      return [...state, action.payload]
    case 'removeCart':
      const targetItemIndex = state.indexOf(action.payload);
      return state.filter((item, index) => index !== targetItemIndex)
    case 'changePrice':
         return changePrice(state, action.payload)
    default:
      return state;
  }
}
export default reducer;

You are mutating state object before copying with this line: filteredObject[0].price = newprice; — mstfyldz
– mstfyldz, Commented Mar 21, 2019 at 13:01

Hemant Parashar · Accepted Answer · 2019-03-21 13:29:46Z

1

filteredObject is an array. You override the newObject to be an array in this statement newObject = filteredObject. So the newObject is an array ( in [...itemArray, newObject] ) rather than an object. Keep things simple without unnecessary complexity.You can use Array.map. So do this instead

const changePrice = (itemArray, item) => {
  return itemArray.map(reduxItem => {
     if(reduxItem.id === item.id){
       reduxItem.price = reduxItem.price + reduxItem.price
     }

     return reduxItem
  });
};

See this for more info https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#inserting-and-removing-items-in-arrays

Hope this helps!

edited Mar 21, 2019 at 13:29

answered Mar 21, 2019 at 13:07

Hemant Parashar

3,7842 gold badges18 silver badges23 bronze badges

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

6 Comments

Kinan Alamdar Over a year ago

thanx for reply but this will create a new object inside the state and I don't want that. I just want to change the price of the product

Kinan Alamdar Over a year ago

i'm actually new to redux and i dont if it's possible or not but what i want is not creating a new object i just need the price to be changed there is other ways using localstorage but i thought there must be a way doing it in redux

Hemant Parashar Over a year ago

@KinanAlamdar I got your point. Check my answer again....I updated the code

Kinan Alamdar Over a year ago

that's what i was looking for thanx brother so what was the issue can you explain if don't mind? anyways thanx again for help

Hemant Parashar Over a year ago

@KinanAlamdar Your welcome :) .The issue was that you were returning the state with a new array with a new object [...itemArray, newObject]. So a new item was being added each time the price was changed.

|

Rahul Rana · Accepted Answer · 2019-03-21 13:22:02Z

1

Instead of mutating the state.

// use this
const newState = Object.assign({},state);

We can create a new state and now if you do this, this works fine. This avoids mutating state.

answered Mar 21, 2019 at 13:22

Rahul Rana

4652 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to change a value inside array of object in Redux

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related