How to in javascript update inner object array with spread operator

Question

I have in my reducer for a store, need to update an inner array object value:

for:

export interface SiteState {
  site: Site;
}

and

export interface Site {
  id: number | null;
  uuid: string;
  subscriptions?: (SubscriptionI)[] | null;
}

and would like update the site->subscriptions[x] = action.payload

// edited with solution

function handle(state: SiteState, action: Successaction): SiteState {
  const sub = state.site.subscriptions.map( subs => {
    if (subs.uuid === action.payload.uuid) {
      return action.payload
    } else {
      return subs;
    }
  });
  const site = { site: {...state.site, subscriptions: sub} };
  return site
}

I tried the spread operator but he just push my new subscriptions into the root site, si don"t know how write it for update the object SubscriptionI who is an array.

try this: `const site = {...state.site, subscription: [ ...state.subscription, ...action.payload]};`. Or try to use another structure, like Map or Set, if there are any keys and then update them by key. — Diyaz Yakubov, Jan 09 '20 at 12:36
Type '{ subscription: SubscriptionI; id?: number; uuid?: string; name: string;' is not assignable to type 'SiteState'. Object literal may only specify known properties, and 'subscription' does not exist in type 'SiteState'. — Tony Ster, Jan 09 '20 at 12:53
@RamiLoiferman the com from nowhere i still need filter or map by id, from the payload — Tony Ster, Jan 09 '20 at 12:55
You need to `return {site}` to match the `SiteState` return type. — Bergi, Jan 09 '20 at 13:12

score 1 · Answer 1 · answered Jan 09 '20 at 12:39

1

if you want to completely replace the subscriptions array then what you are doing is correct. However if you just want to add the whatever you have in action.payload to the subscriptions array than you need:

  const site = {...state.site, subscription**S**: [...state.site.subscription**S**, action.payload]};

answered Jan 09 '20 at 12:39

Ivan Mihaylov

434
2
9

not assignable to type 'SiteState', and 'subscription' does not exist in type 'SiteState'. – Tony Ster Jan 09 '20 at 12:50
Yes your interface is called subscriptionS not subscription that is why in my answer you have the stars around the 'S' – Ivan Mihaylov Jan 09 '20 at 13:05

How to in javascript update inner object array with spread operator

1 Answers1