Keep your side-effects in the right place with

redux-observablea ngParty Regular meetup XIV talk

$whoami

Viliam Elischer

SW Engineer at

twitter.com/vireliam

github.com/vire

github.com/ngParty

Agenda

Tackle the side-effects

State of art

Redux-observable

Demo

Why bother with side-effects?

Because side-effects in codebase might* lead to:

development slow-downnon-determinism a.k.a. bugs hard maintenance on-boarding

official react docs

KPIs for dealing withside-effects?

1. How painful is adding new features 2. API - developer’s experience 3. Testability 4. Maintainability / Refactoring 5. Documentation

State of the art for libs handling side-effects in redux* applications

#1 redux-thunk

A thunk is a function that wraps an expression to delay its evaluation.

Pros / Cons

(+) Easy, simple, good for beginners

(+) Good enough for small project

(+) Documentation / part of redux

(-) Complexity grows quickly (promises, dispatches)

(-) Harder to test

(-) Business logic in action creators

(-) Custom utilities - cancelation, debounce, throttle, retry

exhaustive SO explanation on redux-thunk

#2 Effect executors

Store (state, effects) Reducers (state, action, effects)

Dispatch(action, effect) Middleware(store, executor)

#2A redux-effects*

Not maintained anymore, complex & complicated

#2B redux-side-effect

Execute side effects from reducer function

Pros / Cons

(+) Easy to test*

(+) Sync action creators

(-) Hard to maintain

(-) Race conditions (setTimeout required)

(-) Action creators bloated wit SE logic

(-) Custom utilities - cancelation, debounce, throttle, retry

* based on visual opinion

#3 salsita/redux-side-effects

“What if your reducers were generators? You could yield side effects and return application state.”

Pros / Cons

(+) Declarative side effects / yield in reducer

(+) Easy to test

(+) Documentation

(-) Generators (available under flag)

(-) Custom utilities - cancelation, debounce, throttle, retry

#4 redux-saga

“The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects.”

official docs

Knowledge of generators concept required

Pros / Cons

(+) Mature

(+) Easy to test

(+) Documentation

(+) Custom utilities - cancelation, debounce, throttle, retry

(o) Generators

(-) Ease of use

(-) Complexity

#4 redux-observable

“RxJS 5-based middleware for Redux. Compose and cancel async actions to create side effects and more.”

official docs

Epic

core primitive of redux-observable.

a function which takes a stream of actions and returns a stream of actions.

actions in, actions out.

Example

Implementation

Implementation

Demo

Q&A

Thank you!@vireliam

#devsUnited

A. Sharif

Generators and Channels in JavaScript