My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

React Hooks and observables/Rx.js - StateOfJs 2019

Kushal V. Mahajan's photo
Kushal V. Mahajan
·Dec 14, 2018

I've been learning about observables and how they come up with different flow of writing apps.

My goal is to find the best fit for writing React app with Rxjs and Observables.

I'm experienced React dev familiar with Redux and other popular libraries in ecosystem - redux-thunk, redux-saga.

#Approach 1

I had a look at redux-observables. I created an app and it worked well for handling side effects and async actions. So, I was sure to replace saga with redux-observables for managing my async actions.

So, in-short app will be react redux paradigm aligned except that I'll add a middleware for handling async actions i.e. redux-observables in this case instead of redux-saga.

Approach#2

Then I had also had a look at recompose library while looking to hookup rxjs and react and came across these two links.

  1. medium.freecodecamp.org/how-to-build-a-gith..

  2. egghead.io/lessons/react-configure-recompos.. My understanding - We'll be streaming everything and building components out of Rxjs streams.

That shortens the code and forces to think everything streams. I think I also read about not using state management if using Reactive pattern ( Use an observable which will be responsible for knowing the footprints of all other observables ). So I obviously would want to gain more understanding by building something out of that recompose thing but then I read and I quote from recompose's author.

Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today, we announced a proposal for Hooks. Hooks solves all the problems I attempted to address with Recompose three years ago, and more on top of that. I will be discontinuing active maintenance of this package (excluding perhaps bugfixes or patches for compatibility with future React releases), and recommending that people use Hooks instead.

My questions and confusions at this brim of hyper-active changes and paradigms across JS apps esp in React.

  1. Will hooks play along with Observables? If yes, how ?

2. Is it a good idea to stream everything ( including components in general) as shared in approach#2 or should I start with Approach#1 - async actions with Observables and state management as per normal React/Redux pattern?

3. What pattern is the best to adopt to couple it with React ecosystem) considering that I'm already sold over observables and Rxjs and highly considering it.

UPDATE -

After watching React hooks talk, redux is built in. More interesting. Any thoughts?

Thank you!