Replicate immutable data in typescript with the ReplicationBuilder
Tags: typescript, immutable, assign, clone
Published: 2018-07-16 14:33:00

---
title: Replicate immutable data in typescript with the ReplicationBuilder
published: true
description: The ReplicationBuilder is a typescript tool to clone immutable data objects in a typesafe, refactorable and well readable way.
tags: typescript, immutable, assign, clone
---

![ReplicationBuilder Demo](http://maimart.de/wp-content/uploads/2018/07/ReplicationBuilder.gif "ReplicationBuilder Demo")

The ReplicationBuilder is a typescript tool to clone immutable data objects in a typesafe, refactorable and well readable way.

In our single page applications we often use different implementations of redux to handle our application state.

The more complex the data structures become, the more complex becomes the code that handles the immutable states when using Object.assign() or something like that.

Therefore this often ends up in code that is really hard to read and maintain.

So my intention was to create a tool that can handle immutable data in a typesafe, refactorable and well readable way.

The powerful keyof-feature introduced in Typescript 2.1 to lookup for objects properties in a typesafe way helped me a lot to solve that.

The result i called ReplicationBuilder and is a typesafe, fluent API to build replications of an object.

Together with some other small helpers its published in the npm package "typescript-immutable-helper".

The source code is hosted on <a href="https://github.com/maimArt/typescript-immutable-helper">GitHub Repository</a>

I would be glad for some feedback or if you want to constribute.

&nbsp;
## Syntax
#### simply replace property by with new value
```javascript
return ReplicationBuilder.forObject(state).property('party')
   .replaceValueOf('name').with('MyParty')
   .build()
```
#### replace property depending on old value
```javascript
return ReplicationBuilder.forObject(state).property('party')
   .replaceValueOf('partymemberArray').by((oldPartymemberArray) => [...oldPartymemberArray, 'new partymember'])
   .build()
```
#### clone property and apply some function on it
```javascript
return ReplicationBuilder.forObject(state)
   .replaceValueOf('party').withCloneAndDo((clonedParty) => clonedParty.addPartyMember('new partymember'))
   .build()

```
## Characteristics
#### typesafe properties
<a href="http://maimart.de/wp-content/uploads/2018/07/typescript_immutable_helper_invalidProperty.png"><img class="alignnone size-full wp-image-196" src="http://maimart.de/wp-content/uploads/2018/07/typescript_immutable_helper_invalidProperty.png" alt="" width="945" height="62" /></a>
#### typesafe property values
<a href="http://maimart.de/wp-content/uploads/2018/07/typescript_immutable_helper_invalidValue.png"><img class="alignnone size-large wp-image-197" src="http://maimart.de/wp-content/uploads/2018/07/typescript_immutable_helper_invalidValue.png" alt="" width="938" height="61" /></a>
#### chainable
```javascript
return ReplicationBuilder.forObject(state)
    .property('party').replaceValueOf('name').with('MyParty').replaceValueOf('members').by((members) => [...members, newMember])
    .property('initiator').replaceValueOf('prename').with('Party').replaceValueOf('surname').with('guy')
    .build();
```
#### refactorable and easy to read
## Usage
<ol>
 	<li>Load an object by calling <code>ReplicationBuilder.forObject()</code></li>
 	<li>Navigate down the object tree through the typesafe function <code>property()</code></li>
 	<li>Modify a property with either (see syntax paragraph above)
<ul>
 	<li><code>replaceValueOf('prop').with(newValue:T)</code></li>
 	<li><code>replaceValueOf('prop').by((T) =&gt; newValue:T)</code></li>
 	<li><code>replaceValueOf('prop').withCloneAndDo((clonedProp) =&gt; clonedProp.doSomething()</code></li>
 	<li><code>removeProperty('prop')</code> to remove the property in the resulting object</li>
</ul>
</li>
 	<li>Repeat step 3 and 4 until all modifications are done</li>
 	<li>Produce the replica with <code>build()</code></li>
</ol>
<h2></h2>
<h2><a id="user-content-behaviour" class="anchor" href="https://github.com/maimArt/typescript-immutable-helper#behaviour" aria-hidden="true"></a>Behaviour</h2>
<ul>
 	<li>deep copies the source object</li>
 	<li>freeze in --&gt; freeze out. If the source object was frozen (for detecting manipulations while development), then the produced replica will also be deep frozen.</li>
 	<li>warning if source object is not deep frozen (produced replica will be deep frozen)</li>
</ul>
<h2></h2>
<h2>Demo</h2>
![ReplicationBuilder Demo](http://maimart.de/wp-content/uploads/2018/07/ReplicationBuilder.gif "ReplicationBuilder Demo")

originally posted on http://maimart.de