+

RxJS with React

The best, most maintainable code, is code that matches the way you think about the problem, without a lot of noise

What do I mean by noise...?

Therefore, the best
Language / Framework / Library
FOR YOU
is the one that either:

A. Matches your way of thinking

B. Guides you to think in a different way

+

Succinct, expressive code, that lets you build complex web applications

"without a lot of noise"

Why RxJS?

Succinct, expressive code for dealing with
events, asynchronicity and state

Steep Learning
Curve

Declarative Style

Functional in Nature

Encourages Immutability

Why React?

Succinct, expressive code for dealing with
UI based on discrete synchronous state updates

Steep Learning
Curve

Declarative Style

Functional in Nature

Encourages Immutability

Why RxJS with React?

+

Sync State

Change the way you think about problems

+

How to use RxJS with React

observables with

useState()
useEffect()

+

const [state, setState] = useState()

useEffect(() => {
  const sub = observable$.subscribe(
    newState => setState( newState )
  );
  return () => sub.unsubscribe()
}, [])
Syncing State
const [people, setPeople] = useState();

useEffect(() => {
  const sub = ajax(ENDPOINT).subscribe(
    ({ response: { results } }) => {
      setPeople(results);
    }
  );
  return () => sub.unsubscribe();
}, []);
RxJS.ajax()

+

useEpic

https://github.com/BigAB/use-epic

Benefits?

+

Succinct, expressive code

Powerful best in class abstractions 

Separation of Concerns

Components become about
User Interface

Separation of Concerns

Observables are how you handle application state and events

Testing

Test components and observables separately

Cross Framework

Use tools and from other communities

Awesome
Rx Tools

RxJS is super popular across frameworks so, sometimes we get to use solutions from other communities, and there is just a lot of cool RxJS stuff out there

+

RxJS with React