Immutable.js with firebase

To store data we can use either object or we can use array in javascript. Both have their own advantage and disadvantage.

Array : Array has advantage of maintaining order, but negative side is that If you want to update any element inside array you have to find the index of the element. May be via looping through the whole array if indexes are not predictable.

Object : You can store element as object property. It's like key-value pair, So If you want to update any property (element) of object, you can update it easily using key. So, It's easy to update the elements in object, but object uses hash for property, So order is not guaranteed.

Immutable.js with firebase

Firebase provides live updates. Suppose you are having a program where you are listening for live updates on some last x elements, while retaining others for display only, but order of display matters. 

You are listening for last x elements live, So you have to update the data of those elements when you receive update  from firestore, but also have to maintain order of all the elements.

Here comes immutable.js, to get advantage of both Array and Object. Using OrderedMap from immutable.js which has ability to update with key and which guarantees the order as well, solves the problem.

[Source code]

In orderedMap element stored in order of they are set, But for existing key it updates the existing element with that key. So, you get your update with key problem solved here.

Now next issue is display in order. 

You can convert OrderdMap to an array using toArray method on it. So you will alway get orderd output.

[Source code]

Real world uses case is pagination. How ??? Try to implement a pagination with infinite scroll which fetches old message when scrolled up while also listens live to the last X messages while on the bottom.