React, Redux (Angular)

Featuring

Reiter István - LogMeIn (Rescue)

"Nincs az az isten, hogy én ilyen webes vackokkal foglalkozzak!"

Reiter István (~2004)

A React a legistenkirályabb framework a Reduxnál pedig nincs jobb architektúra!

• "A Javascript library for creating user interfaces"
• "The 'V' in 'MVC'"
• "A library, not a framework"
• Deklaratív
  • Állapotgép
  • Renderelés hatékony - csak ami változott
• Komponens alapú (mi nem?)
• One-way data flow

Two-way binding && Unidirectional data-flow

• Two-way binding
  • Ha a model változik az adat is változik - és fordítva
  • Nem annyira determinisztikus
• Unidirection data-flow
  • Csak a model változása változtatja meg a UI-t
  • Single source of truth
  • Kiszámítható

• Csak view, ezért minden mást össze kell legózni
  • Routing: React-Router
  • Ajax/Http: superagent, fetch
  • State: Flux, Redux
  • Adatkezelés: Immutable.js, lodash

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render(){
        <h1>Hello React!</h1>
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

JSX

• Igazából nem HTML
• <div>Hello World!</div>
  • react.createElement('div', null, 'Hello World!');
• Csak egy gyökér elem lehetséges
• Kisbetű/nagybetű más jelentőséggel bír
  • ami kisbetűvel kezdődik az string lesz
  • ami nagybetűvel az komponens

State és props

• State: a komponens lokális állapota
  • this.state-en keresztül érhető el
  • this.setState használható módosításra
    • this.setState({key: value }) 
      • Shallow merge
    • ​Ezután újrarenderelődik a komponens
    • this.state-et nem ajánlott közvetlenül módosításra használni
• Props: kívülről attribútumokon keresztül érkező adat
  • Bármi lehet (primitív típus, tömb, objektum, függvény)
  • Read-Only
  • Egyetlen objektumban kombinálódik az összes props érték amit a this.props-on keresztül érünk el
  • PropTypes: típus-ellenőrzéshez

class Hello extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return (
            <div>
                Hello {this.props.name}!
            </div>
        );
    }
}

ReactDOM.render(
    <Hello name="István" />,
    document.getElementById('app'));

class Click extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            value: 'alma'
        };

        this.sayNoToApple = this.sayNoToApple.bind(this);
    }

    sayNoToApple(){
        this.setState({
            value: 'béka'
        });
    }

    render(){
        return (
            <div>
                Hello {this.state.value}!
                <button onClick={this.sayNoToApple} value='Click me!' />
            </div>
        );
    }
}

Dumb Components - Smart Containers

• Válasszuk szét a prezentációs réteget és a logikát
• "Pure" komponensek
  • csak megjelenés
• A konténer kívülről injektálja be az adatokat és az eseménykezelőket
• Kicsit idétlen
  • De hasznos!
  • Újrafelhasználható komponensek
  • Produktív

ViewModel\Controller

ViewModel\Controller

ViewModel\Controller

ViewModel\Controller

View

View

View

View

Flux

• Facebook
• Store == Model
  • Több is lehet
• Dispatcher

Redux

• Három szabály
  • Single source of truth - Store
  • A Store read-only
  • Minden változás "pure function"-ök segítségével történik
    • Reducer
    • (state, action) => newState

Közjáték: HOF

Higher Order Function

• Függvényt kap paraméterként...
• Vagy visszaad egyet

function twice(f, v) {
  return f(f(v));
}

function add3(v) {
  return v + 3;
}

console.log(twice(add3, 7)); // 13

var peterParker = function PeterParker(superPower = []) { };

var mutantSpiderBite = function(human) {
    return human(["eatFlies", "climbWalls", "shootWeb"]);
}

var spiderMan = mutantSpiderBite(peterParker);

"Advanced" témakörök

• Middleware
  • Azelőtt ér el hozzá egy action, hogy a reducer felkapná
    • Logolás, async hívások
• Aszinkron műveletek
  • Az action tulajdonképpen egy függvény lesz
  • Middleware elkapja és megvárja a promise-t
  • Végül elküld egy új action-t a kapott adatokkal
  • React-Thunk vagy React-Saga

Köszönöm a figyelmet :)

Hasznos linkek

• https://github.com/markerikson/react-redux-links
• http://redux.js.org/
• https://github.com/reiteristvan/react-starter
• https://github.com/reiteristvan/react-redux-demo
• https://leanpub.com/redux-book