Day 21: Redux and immutability

1 min read    23 May 2017    

15 min, 9:58

Completed egghead videos, but will not be maintaining own videos with such awesome resources existing.

JSBin

JSx, Javascript with XML.

React is in a way similiar to Uncle Bob’s architecture explanation.

Until now, with node we have had a MRC model [Models, routes, controllers], but react has an MVC architecture [Models, view, controllers]

Uncle Bob's  architecture example image

Views are the most external loop here. Views call actions to change props. Actions call reducers to deal with states. The advantage of such an architecture is we can always deterministically determine the flow due to which the current state has been reached. Also, react has only one way data flow. From inner circle to the outermost.

I’m currently reading articles on Medium to broaden my understanding of React, and why should anybody use it in the first place.

Discuss in detail what reconciliation algorithm is all about.

Is it a bit weird that the top 5 articles on Medium related to react have all exactly 2k recommendations. ?

  • Render in react is automatic.
  • Regeneration [Doctor who anyone ?] in react is done smartly, only regenerating things
  • Platform agnostic, biyatch.

“If a tree falls in the forest, no one will know”.

Persistent data structures. Stack, immutable - share as much data as you can. You need a gc, garbage colector

Persistent data structures can be achieved using immutable.js

Say in our original tree (black), we have made certain modifications (adding a parameter e to f). New nodes are made which reference to existing non modified nodes. wiki-persistent-data

Head over to immutable-js, and open the console to get an idea.


> a =Immutable.fromJS({b:5})
ct {size: 1, _root: pt, __ownerID: undefined, __hash: undefined, __altered: false}
> a.toJS()
Object {b: 5}
> a
ct {size: 1, _root: pt, __ownerID: undefined, __hash: undefined, __altered: false}
> a.update('b', () => 3)
ct {size: 1, _root: pt, __ownerID: undefined, __hash: undefined, __altered: false}
> a.update('b', () => 3).toJS()
Object {b: 3}
> a.toJS()
Object {b: 5}


> a = Immutable.fromJS({a:{b:5, e:6}, c:{d:8}})
ct {size: 2, _root: pt, __ownerID: undefined, __hash: undefined, __altered: false}
> a.toJS()
Object {a: Object, c: Object}
> b = a.updateIn(['a', 'e'], () => 9)
ct {size: 2, _root: pt, __ownerID: undefined, __hash: undefined, __altered: false}
> b.toJS()

> a == b
false
> a === b
true
> a.get('c') == b.get('c')
true

Exp: 145 + 113

Some rights reserved.

Leave a Comment