React, Redux architecture notes

After some discovering of the React JS (and Redux of course) as a way to build modern web apps, I've collected some keynotes that could have helped the newbie to start off faster.

• parent -> child - events go UP to parent, data goes DOWN from parent to child, lowest level child is supposed to be stateless, presenter level component:

render() { 

   return (<Child item={this.state.items} toggleView={this.toggleActive}>)
}

Schema from css-tricks.com article - https://css-tricks.com/learning-react-redux/

• Another party listening to a state change of one of the smart (= higher level) component can be other component that is not in the same parent-child relations; it can call: store.subscribe, store.getState 
• Redux (flux state in general) example: parent component loads data, then in a callback (both success or error, but different event) of data loading it calls store.dispatch, and send there a type of event and payload - loaded data or reason of the error accordingly;
• Classic point, binding component method called in UI to the right this, here are options - http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html plus some of those in this pic:

Ways to pass the right 'this' to the action handler in the component; stackoverflow.com

• Store in Redux methods: store.dispatch, store.subscribe, store.getState;
• State in Redux has to be immutable, new state object must be created rather than mutating the existing one. You can't do in outside of the reducer anyway, since the state API is only getters. But inside of the reducer function ways to do that are:

1) Use immutable.js
2) Object spread operator in ES6
len newState = {...oldState. foo:'bar'};
3) Object.assign with empty object
len newState = Object.assign({}, oldState, {foo:'bar'});

• Another abstraction point in Redux state management - action creators, those are the functions that take payload as an argument and emit fully detailed action objects

• A way to implement app-wide functions in React application is global wrapper components - e.g. react router, react-intl, hot reloading;

A super useful repository with those things described and other ReactJS patterns explained with code examples and use cases - react-in-patterns.

Pick your own best fitted Reactjs boilerplate: another handy for neophytes resource where you can pick one (or many) of the variety of starter kits containing the basic element of a bigger app to be -  http://andrewhfarmer.com/starter-project/