Create your own Redux
with RxJS
What we'll cover 🗺️
- What reactivity is
- How RxJS can help you with it
- Create our own Redux store with RxJS
Takeaways 🍟🚗
How powerful a reactive style can be
Some insight into how Redux works internally
Reactive programming
Reactivity
Thing happens
⬇️
Triggers something else
[4, 8, 15, 16, 23, 42]
[4, 8, 15, 16, 23, 42]
.map(x => x * 2)
.filter(x => x % 2 == 0)
.reduce((x, y) => x + y)
[4, 8, 15, 16, 23, 42]
.map(double)
.filter(isEven)
.reduce(sum)
clickity click
[click!, click!, click!]
[click, clickclick, click]
.map(getCoordinates)
.filter(isInsideSquare)
.reduce(count)
Observable
fromEvent(button, 'click')
Rx.Observable.fromEvent(button, 'click')
.map(getCoordinates)
.filter(isInsideSquare)
.reduce(count)
clickStream
.buffer(clickStream.debounce(100))
.filter((clicks) => clicks.length == 2)
.map(first)
.map(getCoordinates)
.filter(isInsideSquare)
.reduce(count)
In RxJS,
everything is a stream
Subscription
clickStream.subscribe(doSomething)
Observer
clickStream.subscribe(doSomething)
^^^^^^^^^^^^^^^^^^^^^^^
Subject
An Observable for multiple observers
Kind of like an event emitter
subject.next(value)
Emits value to all observers
.next(10)
10
BehaviourSubject
Like subject, but with state
.next(10)
10
10
Managing state
Redux
Core constructs
- Store
- Reducer
- Action
Store
Internal state
Get state -> store.getState()
Dispatch an action -> store.dispatch(action)
Subscribe to changes -> store.subscribe(func)
Let's try to reimplement the store!
RxJS is incredibly powerful
Redux is really simple at its core
Redux has a clear API
actions
reducer
renderer
.scan(
)
.subscribe(
)