React, Redux &

reactive

programminG

@channikhabra

No Observable in ES2016   : (

Some bad news first

Let's procrastinate

Existential crisis

Why React?

Why Redux?

Why Rx?

Do the tools matter?

vs

React

Thinking

in

const model = { . . . };

React.render(<App {...model} />, document.getElementById('app'));

What?

How?

Component

{ property1: 1, property2: 2  . . .}
<div> . . . </div>

Data

UI

User

Well, if only it was true

Awesome! Right?

State

Redux

Say hello to

State

UI

User

Components

Store

Store

side effects

Angel of

Action for

side effects

{
  type: 'WHAT_TO_DO',
}

<MyComponent {...props} />

What to render?

What to do?

React

Redux

Declarative

What?

Imperative

How?

vs

Child Component

Parent Component

Child Component

Parent Component

Everything talks in

Actions

???

ƒ(x)

Promise

It's a Promise
It's a Function

What is it?

It's a Promise
It's a Function

It's an

Observable

What is an Observable?

What is an Observable?

  • Lazy as a function
Observable.interval(300)
          .do((v) => console.log(v));

---
Console
---

>
Observable.interval(300)
          .do((v) => console.log(v))
          .subscribe();

---
Console
---

> 1
> 2
> 3
...

What is an Observable?

  • Temporal as a promise

Now

Future

Promise

Observable

What is an Observable?

  • Collection as an array

Array

Observable

[1, 2]

Observable is:

  • A function
     
  • A Promise
     
  • An Array

How to use Observable?

Source

Sink

Manipulation

How to use Observable?

Source

  • Normal values
  • Arrays
  • Iterables
  • Generators
  • Promises
  • Callbacks
  • Custom logic

How to use Observable?

Manipulation: Operators

  • map
  • filter
  • flatMap
  • merge
  • catch

    Many more

How to use Observable?

Sink: subscribe

.subscribe({
    next: (x) => console.log(x),
    error: (e) => console.error(e),
    complete: () => console.success("Done!")
})

How to use Observable?

Sink: Observer

{
    next: (x) => console.log(x),
    error: (e) => console.error(e),
    complete: () => console.success("Done!")
}

How to use Observable?

A subscription is valid until:

  • We `unsubscribe()` it
  • An error occurs
  • Observable completes

How to use Observable?

Example

Observable
  .from([1, 2, 3, 4, 5]) // source
  .map(n => n * n)  // manipulation
  .filter(n => n % 2) // manipulation
  .subscribe(n => console.log(n)); // sink

How to use Observable?

Subject

Observable

Observer

+

Subject

=

Let's build an

App

App

Dear Diary

Child Component

Parent Component

Control flow with Callbacks

Control flow with action emitting Observable

Child Component

Parent Component

. . . build the app

Thank you

@channikhabra

Copy of React, Redux and Reactive programming

By Denis Tsoi

Copy of React, Redux and Reactive programming

Building a React/Redux app with a twist of Reactive programming.

  • 1,105