Object destructuring returning nested object

Question

I have the following initialState for my reducer:

export function videos(
  state = { videos: [], search: { videos: [], term: "" } },
  action
)... 

In my reducer I look for persisted state and create my new videos array with some persisted props:

case "VIDEOS_SUCCESS": {
  const { data } = action;
  let videos = [];
  let questions = [];

  data.map(item => {
    let persistedVideo =
      state.videos.find(video => video.id === item.id) || null;
    let bookMarked = persistedVideo ? persistedVideo.bookMarked : false;
    let completed = persistedVideo ? persistedVideo.completed : false;
    ....

    videos.push(newVideo);
  });

  return { ...state, videos: videos };
}

When I return my new state the videos array is nested in the video property.

{videos:{
    search: {videos: Array(0), term: ""},
     videos: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
}}

How can I get my state to look like:

{
   videos: (10) [],
   search: {videos: [], term: ''}
}

Answer 1

Stores always partition state according to their reducers so if you call store.getState() you should expect that the returned state is in the form

{
  reducer1: { /* state of reducer1 */ },
  reducer2: { /* state of reducer2 */ },
  ...
}