I am coding along with the Redux Essentials tutorial.
When I run notificationArray.map without using the return value, my state is updated per the map functions callbacks.
I.e. in allNotifiicationsRead, each notifications's read property is set to true in the app state. And in fetchNotifications, all each notification's isNew property is set to !read.
I would expect this notificationArray.map(...) call to not have any effect since, I am not using the return value, let alone editing the state with it such as something like notificationsAdapter.setMany(notificationArray).
Any clarification on how this is working would be appreciated.
Please let me know if I didn't include any relevant details about this app.
const notificationsSlice = createSlice({
name: 'notifications',
initialState: notificationsAdapter.getInitialState(),
reducers: {
allNotificationsRead(state, action) {
const notificationArray = Object.values(state.entities)
notificationArray.map(notification => (
notification.read = true
))
}
},
extraReducers(builder){
builder.addCase(fetchNotifications.fulfilled, (state, action) => {
notificationsAdapter.upsertMany(state, action.payload)
const notificationArray = Object.values(state.entities)
notificationArray.map(notification => (
notification.isNew = !notification.read
))
})
}
})
Array#mapproduct to anything.map()without a return as that is simply aforEach()with additional overhead, but the reason it's mutating your state is that you are directly changing a nested object's properties.mapdoesn't clone the contents of the array it's called on in any way. To avoid the mutation you should be using the returned array from themap()and you should be cloning each object in the callbackconst notificationArray = Object.values(state.entities).map(notification => ({...notification, isNew: !notification.read}));notification.read = true). The alternative is to copy, but then where do you want to store it -- since you madenotificationArrayaconst?.map(notification => (...))instead of cloning each object with.map(notification => ({...})). It seems like the former will always lead to modifying the original array (as well as not returning a modified array) and therefore an antipattern. Can you point me to a resource that explains exactly what the syntax being used in each is? I.e..map(notification => (...))modifies the array whereas.map(notification => ({...}))clones each item.