title: Nested array maps inside of reducer
body: <p>have a complex redux situation I am working with and cant quite get what I need. I have 2 objects, <code>Track</code> and <code>Target</code></p>
  <pre class="lang-js prettyprint-override"><code>interface Track {
    id: number,
    ...other fields
  }
  
  interface Target {
    id: number (same as the Track)
    tracks: Track[]
    ...other fields
  }
  </code></pre>
  <p>what I am trying to do is when I fetch the tracks I am trying to see if there are any targets that have the same ID (one target to many tracks), and if it does then add the track to that target's tracks array, otherwise - create a new target with that Track id and put the track in the tracks array</p>
  <pre class="lang-js prettyprint-override"><code>case TargetActionTypes.FETCH_TARGETS_SUCCESS:
    return {
      ...state,
      targets: [
        action.tracks.map((track: Track) =&gt;
          state.targets.map((target: Target) =&gt;
            track.target_id === target.id
              ? {
                  ...target,
                  tracks: [...target.tracks, track]
                }
              : {
                  id: track.target_id,
                  visible: true,
                  tracks: [track]
                }
          )
        )
      ]
    }
  </code></pre>
  <p>I think this is on the right track but typescript is complaining because I think maybe its nesting things one level too deep because of the nested loops? Typescript errors here</p>
  <pre><code>Types of property 'targets' are incompatible. Type '{ tracks: Track[]; id: number; visible: boolean; }[][][]' is not assignable to type 'Target[]'.
  Type '{ tracks: Track[]; id: number; visible: boolean; }[][]' is missing the following properties from type 'Target': id, visible, tracks&quot;,
  
  </code></pre>