React with redux - alter response and then push to the store?

Question

I have an app where I download list of files, so I dispatch an action (using axios):

export function getFileList(foo, bar) {
  return {
    type: GET_FILE_LIST,
    payload: {
      request: {
        url: myApiUrl
      }
    }
  }
}

and I get something like this in return:

{
  "output":
    [
      {"file":"file15166.jpg","id":1234},
      {"file":"file231321.jpg","id":6432}
      (...)
    ], 
    "foo": "bar", 
    "etc": "etc"
}

Once I got the data I push it to the store:

case GET_FILE_LIST:
  return Object.assign({}, state, {
    files: action.payload.data.output
})

Now, my question is - what if I need to push also only IDs of these files to my redux store?

I mean in addition to state.myReducer.files I need also state.myReducer.fileIds: [1234, 6432]. How can I take a response, change it and then push to reducer?

I was thinking about running a loop on the response but doing it might cause side effects and these are forbidden in reducers, am I right? What's the right approach here? Excluding modifying the API's back-end of course.

I know the best place to do such stuff is in action, but I don't have response there yet :/ Any ideas?

Answer 1

case GET_FILE_LIST:
  return Object.assign({}, state, {
    files: action.payload.data.output
fileIds: action.payload.data.output.map(item=> item.id);
})

If you do it in this way, I don't see any reason why there should be any side effects.