title: How to add/remove in Array inside dynamic Object
body: <p>I have a reducer with this structure: </p>
  
  <pre><code>{
    [key]: {
      answers: [
        { key: 1, mode: 'INCLUDE' }
      ],
      period: {},
    }
  }
  </code></pre>
  
  <p>Now I'd like to add items to the answers-array, but this doesn't work (inside reducer). Because then each time the only existing array item is being replaced.</p>
  
  <pre><code>return {
    ...state,
    [action.payload.serieId]: {
      ...state[action.payload.serieId],
      answers: [
        { ...action.payload.answerFilter },
      ],
    },
  }
  </code></pre>
  
  <p>This also doesn't work, because the property ...state[action.payload.serieId].answers can't be found. </p>
  
  <pre><code>return {
    ...state, [action.payload.serieId]: 
    {
      ...state[action.payload.serieId],
      answers: [ 
        ...state[action.payload.serieId].answers
        { ...action.payload.answerFilter },
      ],
    },
  }
  </code></pre>
  
  <p>Error:</p>
  
  <pre><code>TypeError: Cannot convert undefined or null to object
  </code></pre>
  
  <p>Is there some way to solve this inside the reducer or do I have to modify the entire Array outside and then simply set it in its entirety on each change?</p>
  
  <p>"Answers" is an Array because there might be more than one filter in there. </p>