ngrx highlight newly added item in grid

Question

I am using ngrx(redux) and I have a list of items displayed (virtual scrolling). On click of a toolbar add button I dispatch Add action and reducer adds one more object to the list and returns new state.

How do I highlight the newly created row?

Should I keep in state a new property with id of the record which is created newly? I might have to scroll the newly created item in view also. Because as the list is virtually scrolled, the component may get destroyed and recreated if user is scrolling the list.

Answer 1

Yes, set isHighlighted to true for the one that just got created. Assuming that you are using something like reselect.js to write your selectors you can then map this list to your Item dumb component.

Then in your Item dumb component if isHighlighted is true then you would highlight.

In terms of the extra complexity that will happen with virtual scrolling, the Store shouldn't care about dom elements getting destroyed or recreated. Therefore if your highlighted Item component gets removed from the dom, that item should still stay in the Store.