Charanjit Singh
I like computers.
React, Redux &
reactive
programminG
@bitspook
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)); // sinkHow 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
@bitspook
React, Redux and Reactive programming
By Charanjit Singh
React, Redux and Reactive programming
Building a React/Redux app with a twist of Reactive programming.
