---
title: "Grouping Immutable Deploy Data | Netlify"
description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!"
source: "https://www.netlify.com/blog/2016/09/13/grouping-immutable-deploy-data/"
last_updated: "2026-07-11T04:52:30.000Z"
---
We recently wrapped up a UI update to the deploys page and laid our [Cards on the Table](/blog/2016/08/25/cards-on-table/). Netlify practices the [JAMstack](https://jamstack.org/) philosophy when building websites, including the one you are reading right now 💥 Which means, we have an API that populates everything on our new “`/deploys`” screen.

![grouped deploys](/v3/img/blog/grouped-deploys.png)

I was tasked with updating the data from a boring list (below) of deploys, to a new list grouped by date (above and fancy).

![not grouped deploys](/v3/img/blog/grouped-deploys-old.png)

The challenge in completing this change is that the data is coming from the API is not grouped by date and just a boring array, did I mention how boring this was?

I did mention the array of data is boring, but we do use Redux to maintain the state of our data within the Container Components, which is a lot of fun to work with. We also use [Immutable](https://facebook.github.io/immutable-js/) to further ensure that the state of our data is maintain.

The Deploy Data comes over in the follow form from our API:

```
// Just an example, not actually code ;)
[  {id: "123", created_at: new Date("2016-05-01 3:37:00")},  {id: "234", created_at: new Date("2016-05-01 4:00:00")}]
```

Redux gives us the ability to access data in a unilateral way, meaning, we do not manipulate the data received, but create new immutable objects, which gives us access the original state of all our data.

It is not ideal to mutate the different deploy states of the sites we host on Netlify. A user has the ability to always look back at the state of their site and even rollback to that deploy state if desired.

The Immutable project helps to ensure immutability of these deploys.

So going back to my task of grouping deploys by date — The deploy screen is the only place where we display deploys and the reducer is the exact spot in the code where we prepare builds to be displayed.

Immutable Objects look very similar to regular JavaSscript objects but differ enough that I have to look up their [documentation](https://facebook.github.io/immutable-js/docs/#/) quite frequently.

Immutable Arrays are called a List and if you are unfamilar and would like to learn more, I would checkout the [egghead.io](https://egghead.io/courses/learn-how-to-use-immutable-js) course on the [Immutable](https://egghead.io/courses/learn-how-to-use-immutable-js).

I actually took the TDD aproach here and wrote out tests for a `groupByDate()`. The idea is to create a new List that groups similar deploys with the **created\_at** date as the key.

```
import expect from "expect";import {fromJS} from "immutable"; // helper to convert JS to Immutable Objectimport {groupByDate} from "./src/reducers/deploys";
describe("grouping builds by date", () => {  it("should handle an empty array", () => {    expect(groupByDate(fromJS([]))).toEqual(fromJS({}));  });
  it("should handle a list with one element with a date", () => {    const items = fromJS([{id: "123", created_at: new Date("2016-05-01 3:37:00 PST")}]);    expect(groupByDate(items).toJS()).toEqual(      {"2016-05-01":  [{id: "123", created_at: new Date("2016-05-01 3:37:00 PST")}]}    );  });
  it("should handle a list with multiple items on the same date", () => {    const items = fromJS([{id: "123", created_at: new Date("2016-05-01 3:37:00")}, {id: "234", created_at: new Date("2016-05-01 4:00:00")}]);    expect(groupByDate(items).toJS()).toEqual(      {"2016-05-01":  [{id: "123", created_at: new Date("2016-05-01 3:37:00")}, {id: "234", created_at: new Date("2016-05-01 4:00:00")}]}    );  });});
```

I now have my test organize, I am now able to implement actual code to group deploys by the similar dates. The `reduce()` function is available to use with Immutable Lists just like mutable JavaScript arrays and gives us the option to default to a Immutable Map as the beginning value.

```
// reduce is used to a new List of Maps with the created_at date as the key
export function groupByDate(items) {  return items.reduce((result, item) => {    const createdAt = moment(item.get("created_at")).format("YYYY-MM-DD");    const existingList = result.get(createdAt) || List();
    return result.set(createdAt, existingList.push(item));  }, Map());}
```

I am now able to reduce the my array into to exactly what a need, grouped array of key/value data grouped by an dates.

```
// New data grouped by date
[  {"2016-05-01":  [    {id: "123", created_at: new Date("2016-05-01 3:37:00")},    {id: "234", created_at: new Date("2016-05-01 4:00:00")}  ]}]
```

Similar the Immutable docs, I always have to refer this [tweet](https://twitter.com/steveluscher/status/741089564329054208) for understanding of how **reduce()** works.

> Map/filter/reduce in a tweet:
> 
> map(\[🌽, 🐮, 🐔\], cook)  
> \=> \[🍿, 🍔, 🍳\]
> 
> filter(\[🍿, 🍔, 🍳\], isVegetarian)  
> \=> \[🍿, 🍳\]
> 
> reduce(\[🍿, 🍳\], eat)  
> \=> 💩
> 
> — Steven Luscher (@steveluscher) [June 10, 2016](https://twitter.com/steveluscher/status/741089564329054208)

I now use everything I have learned and tested in to practive, using my favorite Markup renderer [JSX](/blog/2016/08/17/converting-angular-to-react-jsx/). The result of all my hard work is now stored in the `groupedDeploys` prop, I can now **map()** each item per group and easily display the Group Date. The deploy data is rendered using a second map.

```
...// first map(){groupedDeploys.map((deploys, date) => <div>
  <div>    <h2>{moment(date).format("LL")}</h2>    {!currentDeployed && site.get("build_settings") &&      <a onClick={this.handleTriggerbuild}>        Trigger Build      </a>    }  </div>
  // second map()  <ul>    {deploys.map((deploy) => (      <li key={build.get("id")}>        <CardDeploy data={deploy} />      </li>    ))}  </ul>
</div>)}
...
```

Now that this is good, I can now get back to deploying.

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=Grouping Immutable Deploy Data&url=https://www.netlify.com/blog/2016/09/13/grouping-immutable-deploy-data//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2016%2F09%2F13%2Fgrouping-immutable-deploy-data%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2016/09/13/grouping-immutable-deploy-data//)
-   [Bluesky](https://bsky.app/intent/compose?text=Grouping Immutable Deploy Data+https://www.netlify.com/blog/2016/09/13/grouping-immutable-deploy-data//)

* * *

### Tags

-   [React](/blog/tags/react/)
-   [redux](/blog/tags/redux/)
-   [Immutability](/blog/tags/immutability/)

## Keep reading

![](/_astro/cfdc437592ee2bf75a62690af707d52533d08063-1600x900_2njoni.webp)

Opinions & Insights May 14, 2026

[

### How we built Netlify Database for AI-native development

](/blog/how-we-built-netlify-database-for-ai-native-development)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

![](/_astro/97a103abeebc73c01640f04a5c7555c1d10469aa-1200x675_Z8E0d4.webp)

Opinions & Insights May 6, 2026

[

### My experience building and deploying a project with Netlify Agent Runners

](/blog/my-experience-building-and-deploying-a-project-with-netlify-agent-runners)

-   ![Profile picture of Conor Martin ](/_astro/d1f759333090a4801940b47bf8701c441c6bd4a4-375x375_Bsg02.webp)
    
    Conor Martin
    

## Recent posts

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

News & Announcements June 24, 2026

[

### How we measure Netlify’s Agent Experience

](/blog/how-we-measure-netlify-agent-experience)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

Guides & Tutorials May 15, 2026

[

### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)

](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)