ngrx update object inside array

Question

I have a ngrx store with array of objects. What I am looking for is, update(modify) the object inside the array using the array index. My ngrx data will look like,

    policies: {
        beneficiaries: {
            beneficiaries: [{
                    name: 'pqr'
                    age: 56
                },
                {
                    name: 'xyz'
                    age: 76
                }
            ]
        }
    }

I have to update the beneficiary name based on the array index. So I have implemented the following reducer function

    on(policiesActions.updateBeneficiaryPercentage, (state, action) => {
        return {
          ...state,
          beneficiaries: {
            ...state.beneficiaries,
            beneficiaries: {
              ...state.beneficiaries.beneficiaries,
              [action.index]: {
                ...state.beneficiaries.beneficiaries[action.index],
                name: action.value
              }
            }
          }
        };
      })

The issue with the above code is that after running this code the structure of my store is changing to

policies: {
    beneficiaries: {
        beneficiaries: {
            0: {
                name: 'pqr'
                age: 1000
            },
            1: {
                name: 'xyz'
                age: 76
            }
        }
    }
}

Please help me to fix the code so that I can update the value without altering the store structure.

timdeschryver · Accepted Answer · 2020-05-03 07:13:46Z

18

+50

Use the Array.map method:

arr.map((value, index) => index === action.index ? {...value, name: action.value} : value)

Or just use ngrx-etc, which lets you mutate your state in a mutable way while remaining immutable

mutableOn(onAction, (state, action) => {
  state.arr[action.index].name = action.name
  return state
})

answered May 3, 2020 at 7:13

timdeschryver

15.6k2 gold badges22 silver badges37 bronze badges

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

2 Comments

Alexei - check Codidact Over a year ago

ngrx-etc is an awesome library, sparing the developer from writing cumbersome code in some cases. This is particularly useful when items order in the array should not be altered. Thanks.

Ash McConnell Over a year ago

Just to note that ngrx-etc has been superceeded by ngrx-immer ( github.com/timdeschryver/ngrx-immer )

Józef Podlecki · Accepted Answer · 2020-05-03 11:21:47Z

10

When updating an object in array, I would re-create an array with all excluded objects and append last object which needs updated value.

const policies = {
  beneficiaries: {
    beneficiaries: [{
        name: 'pqr',
        age: 56
      },
      {
        name: 'xyz',
        age: 76
      }
    ]
  }
}

const updateObject = (state, action) => {

  if(!state.beneficiaries.beneficiaries[action.index]) {
    return state;
  }

  return {
    ...state,
    beneficiaries: {
      ...state.beneficiaries,
      beneficiaries: [
        ...state.beneficiaries.beneficiaries.slice(0, action.index),
        {
          ...state.beneficiaries.beneficiaries[action.index],
          name: action.value
        },
        ...state.beneficiaries.beneficiaries.slice(action.index + 1)
      ]
    }
  };
}

console.log(updateObject(policies, {index: 1, value: 'test'}))

--Edit

Added the snippet and changed the logic so it doesnt change list order.

edited May 3, 2020 at 11:21

answered May 2, 2020 at 19:12

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

2 Comments

Jobz Over a year ago

This one is working... but the order of array elements are changing... That is the updated element will become the last element in the array...

Józef Podlecki Over a year ago

Updated an answer. Yeah that didn't make sense at all when new state changes the order of list.

Darren Street · Accepted Answer · 2021-05-28 15:48:34Z

8

This is an easy way without resorting to deep diving into the state object.

on(ProductActions.updateProductSuccess, (state, action): ProductState => {

  // define a constant and map over the existing state, inserting your new item,
  // then assign your new object as the new state.

  const updatedProducts = state.products.map(
  product => action.product.id === product.id ? action.product : product);
  return {
    ...state,
    products: updatedProducts
  
   };
}),

This assumes you are passing a complete product object in your success action.

answered May 28, 2021 at 15:48

Darren Street

1,83820 silver badges23 bronze badges

Comments

Fabio Rizzello · Accepted Answer · 2021-03-25 12:36:17Z

4

You can use immer.js to generate a new state without touching the previous state. No need to roll your own solution, plus recreating the object by cloning the previous one manually is error prone.

import produce from "immer"

on(policiesActions.updateBeneficiaryPercentage, (state, action) => {
  return produce(state, draftState => {
    draftState.policies.beneficiaries.beneficiaries[action.index].name = action.value
  })
})

If you want to do it in a functional way you may try lenses example using ramda

edited Mar 25, 2021 at 12:36

answered Mar 25, 2021 at 12:18

Fabio Rizzello

514 bronze badges

Collectives™ on Stack Overflow

ngrx update object inside array

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related