How does reducer can work with an object with duplicate keys?

Learning React with Redux, the course author wrote this:

export default (state = [], action) => {    switch (action.type) {      case FETCH_STREAM:        return { ...stream, [action.payload.id]: action.payload };      case CREATE_STREAM:        return { ...stream, [action.payload.id]: action.payload };      case EDIT_STREAM:        return { ...stream, [action.payload.id]: action.payload };      default:        return state;    }  };  

As much as I understood, the { ...stream, [action.payload.id]: action.payload } pattern is a new JavaScript syntax called "Key Interpolation Syntax" and what it does is that it adds a new key/value to our object ( which we have made a copy of it with spread ... syntax first ) so in that case I do understand the CREATE_STREAM one, but how about EDIT_STREAM ? Is it gonna replace the key because the key is already in there? or is it gonna blindly add it so then duplicate key? Also I don't understand the FETCH_STREAM at all. Why is it even like this? Shouldn't it just be a return action.payload ?

https://stackoverflow.com/questions/66467411/how-does-reducer-can-work-with-an-object-with-duplicate-keys March 04, 2021 at 09:45AM