'useSelector dosen't seem to be updated immediately due to reducer state changing

I have a structure(nested object) that exists in the attached image and if I want to change the value of info‍‍[1] and assign it to info state into the related reducer, but it doesn't update immediately and I think a deep comparison between the previous state and current value didn't occur.

Someone suggested the immutable js but I don't how to use it. honestly, I've converted assigning a value(the assigned value to info state after triggering action) to List imported from immutable js because of changing the reference address of the prev state and new value but I didn't get the result.

enter image description here

I prepared a sandbox for it: enter link description here

I expect when I select the cells then push the increase button, selected cells increase one unit increase immediately but it doesn't happen and you must refresh the window to see the changes.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source