Unidirectional Data Flow

React components communicate via props and have child-parent relationships. Parent components can safely pass immutable data down to children. While children can push data up to parents via handlers (callbacks). A perfect flux-harmony
Flux Official Documentation

Background

If a component contains another component, it’s said to be the parent. A component within another component is said to be a child.

<Parent>
    <Child />
    <Child />
</Parent>

Components that exist at the same level, such as two <Child /> up above, don’t share any sort of direct relationship, even though they might be right next to each other. They only “care” about parent <Parent /> and their own nested children.

Here's how uni-directional data-flow is established:

Props (downward movement) Simplest form of passing data into children is via props

render() {
...
  return <Link to={'https://github.com/fosteman/'}>MyGitHub</Link>;
}

<Link> gets his location descriptor (url) via property to

Handlers (upward movement) Function objects can be passed as arguments to other functions, grace to > everything in JS is an object.

const IncrementField = (props) => (
  <div>
    {props.currentCount}
    <input onChange={props.onChange} />
  </div>
);

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    // because components created with classes don’t auto bind component methods, you need to bind them to `this` in the constructor.
    this.handleIncrement = this.handleIncrement.bind(this)
  }
  handleIncrement(amount = 1) {
    // note that immutable state isn't directly modified, instead .setState is used
    this.setState({ counter: this.state.counter + amount });
  }
  render() {
    return <IncrementField currentCount={this.state.counter} onChange={this.handleIncrement} />
  }
}

Method handleIncrement defined on Parent component is handed onClick={this.handleIncrement} via properties to the child component <IncrementField />

This way the child component can push data up without having a least idea of how parent will handle it.

Redux

It is a logical continuation of React state. Should one require to centralize his data in the application, Flux comes in handy.

It is a pattern for managing data flow in your application. The most important concept is that data flows in one direction.

Read my article about Redux!