Where immutability and mutability meets.
npm install branchjsgetState() function in a store and it would always return a new copy of the state, wouldn't it solve your problem? Then your code (probably reducer) may mutate its own copy of the state and once you're happy with it you can announce it as the new state using setState(). So what you gain so far? You have a source of truth. Because you can't access it (only its copies) you can't mutate it. You are free to do mutations on your copy as you like with the whole power of Javascript and you can even time travel! Sounds interesting?
javascript
export class Example
{
state;
constructor()
{
this.setState( { value: 0 } );
}
setState( value )
{
this.state = value;
}
getState(): { value: number }
{
return Branch.create( this.state ); // returns new reference without copying
}
increment()
{
const state = this.getState();
state.value++;
this.setState( state );
}
decrement()
{
const state = this.getState();
state.value--;
this.setState( state );
}
}
`
Better example
`javascript
// Seamless-Immutable, because it's cooler than Immutable.js
feedMammals( state, territoryId ) // reducer
{
const zoo = state;
const territories = zoo.territories;
const isMammal = animal => animal.isMammal;
const feedAnimals = zoo.territories[ territoryId ].animals.map( animal =>
{
if ( isMammal( animal ) )
{
return Immutable.set( animal, 'lastFeeded', (new Date()).getTime() );
}
return animal;
})
const newTerritory = Immutable.set( territories[ territoryId ], 'animals', feededAnimals );
const newTerritories = [ ...territories.splice(0, territoryId), newTerritory, ...territories.splice( territoryId + 1 ) ];
const newZoo = Immutable.set( zoo, 'territories', newTerritories );
return newZoo;
}
// Branch.js
feedAnimals( territoryId )
{
const zoo = store.getState(); // or pass store state as parameter
const isMammal = animal => animal.isMammal;
zoo.territories[ territoryId ].animals.filter( isMammal ).forEach( mammal => mammal.lastFeeded = (new Date()).getTime() );
store.setState( zoo ); // or return
}
`
API
$3
Creates a new branch of data.
`javascript
const newState = Branch.create( oldState );
`
isBranch( target: any )
Returns true, if target was created by Branch.js.
`javascript
const x = { a: 5 };
const y = Branch.create( x );
console.log( Branch.isBranch( x ) ); // false
console.log( Branch.isBranch( y ) ); // true
`
freeze( target: Branch, deep: boolean = false)
Freeze object, if you feel like you need it. It works on proxy level and it bans mutating an object.
`javascript
const state = Branch.create({ x: 5 });
Branch.freeze( state );
state.x = 10;
console.log( state.x ); // 5
`
isFrozen( target: any )
Returns true, if target is ~~a Disney movie~~ frozen. It returns false, if object was frozen by Object.freeze(), because it wasn't frozen by Branch.freeze().
`javascript
const state = Branch.create({ x: 5 });
Branch.freeze( state );
console.log( Branch.isFrozen( state ) ); // true
`
isDirty( target: any )
Retuns true, if there were made some changes, since object was created. If you want a deep version look at hasChanged method.
`javascript
const state = Branch.create({ a: 5 });
state.y = 10;
Branch.isDirty( state ); // true
`
equals( target: any, target2: any )
This returns true, if both targets are based on the same state and they haven't changed. It doesn't deeply compare objects. Hopefully example will be super clear.
`javascript
const data = { x: 5 };
const state1 = Branch.create( data );
const state2 = Branch.create( data );
Branch.isEqual( data, state1 ); // true
Branch.isEqual( state1, state1 ); // true
// Compare modified state
state2.y = 10;
Branch.isEqual( state1, state2 ); // false, because state2 has mutated
// Compare same content
const data2 = { x: 5 };
Branch.isEqual( data2, state1 ); // false, because state1 is based on data1
`
hasChanged( target: Object )
Returns true, if something has changed even deeply in Branch.
`javascript
const state = BRanch.create({ firstLevel: { secondLevel: 10 } });
state.firstLevel.secondLevel = 20;
Branch.hasChanged( state ); // true
Branch.hasChanged( state.firstLevel ); // true
``