2

I want to dynamically pass the id of the entry I want to remove with the payload into the reducer and I am trying to delete an object property (the one with the "eowvw698x" id which is dynamical and may change) and preserve the existing ones.

case DELETE_ENTRY:
   return {
     ...state,
     diaryEntries: {
       ...state.diaryEntries,
       ??????
     },
   };

enter image description here

How can I achieve this?

Edit

I've used Vencovsky's answer and Klaycon's comment suggestion and wrote:

case DELETE_ENTRY:
  const { [payload]: dontcare, ...otherProperties } = state.diaryEntries;
  return {
    ...state,
    diaryEntries: {
      ...otherProperties,
    },
  };

The solutions of other people mutated the state object, which is forbidden by the Supreme Algorithm.

Community
  • 1
  • 1
Mihai Ciobanu
  • 155
  • 7

2 Answers2

5

You could destruct state.diaryEntries to remove that id

   const { eowvw698x, ...otherProperties } = state.diaryEntries

   return {
     ...state,
     diaryEntries: {
       ...otherProperties 
     },
   };

OR

This isn't the best way, but you can set it to undefined.

   return {
     ...state,
     diaryEntries: {
       ...state.diaryEntries,
       eowvw698x: undefined 
     },
   };

Edit

As said in the comments, what you are looking for is dynamically destruct a variable and you can see how to do this in this question.

But for your example, what you can do is destruct and name the variable, only to remove it.

   const { [keyToRemove]: anyVariableNameYouWontUse, ...otherProperties } = state.diaryEntries

   return {
     ...state,
     diaryEntries: {
       ...otherProperties 
     },
   };
Vencovsky
  • 28,550
  • 17
  • 109
  • 176
  • My component cannot read undefined from that property because it's still there, this results into a TypeError. I want it removed. – Mihai Ciobanu Dec 23 '19 at 19:57
  • @MihaiCiobanu then use the first way this answer provides, which is destructuring. – Emile Bergeron Dec 23 '19 at 19:59
  • @EmileBergeron To that edit: This whole thing happens in the reducer, I do not have any state object I can use. It's a case in a switch statement in the reducer. – Mihai Ciobanu Dec 23 '19 at 20:00
  • @MihaiCiobanu it doesn't matter? You're already using `state.diaryEntries` in your question. – Emile Bergeron Dec 23 '19 at 20:03
  • Don't you need `...` before `rest` in the destructure? – Brandon Dyer Dec 23 '19 at 20:13
  • 1
    @Vencovsky When destructuring, the id that comes along with the action type into the reducer, is set dynamically, so I won't be able to destructure dynamically a prop like ```{ [payload], ...otherProperties } = state.diaryEntries``` – Mihai Ciobanu Dec 23 '19 at 20:18
  • 4
    @MihaiCiobanu please update your question accordingly, that's an important detail. – Emile Bergeron Dec 23 '19 at 20:21
  • 4
    @MihaiCiobanu That can be done by aliasing: `{ [payload]: dontcare, ...otherProperties } = state.diaryEntries` will store the property whose key is the value of `payload` into `dontcare` and the rest of the properties in `otherProperties` – Klaycon Dec 23 '19 at 20:22
  • 1
    @MihaiCiobanu I think now is what you are looking for. Please be more clear on what you want next time, it wasn't clear that `eowvw698x` was a dynamic key and not hardcoded. – Vencovsky Dec 23 '19 at 20:29
0

Just delete the property afterwards and be done with it:

case DELETE_ENTRY:
   let output = {
     ...state,
     diaryEntries: {
       ...state.diaryEntries
     },
   };
   delete output.diaryEntries[payload];
   return output;
Klaycon
  • 10,599
  • 18
  • 35