🐶 Promises in Recks: Rx+JSX experiment

In the previous episode we saw that streams are native to Recks:

function App() {
  const clock$ = timer(0, 1000);

  return <div>{ clock$ }</div>
}

online sandbox

Well, the same applies to Promises!

function App() {
  const delayed = Promise.resolve('Hello!');

  return <div>{ delayed }</div>
}

Once the engine receives a promise — it waits for it to resolve and then renders the result in place!

Let's see an example using axios, requesting its github repo description via github API (yep, we'll use axios to know what axios is 🧐):

import axios from 'axios';

function App() {
  const url = 'https://api.github.com/repos/axios/axios';

  return <div>
    <h1>Axios</h1>
    <p>{
      axios.get(url).then(response => response.data.description)
    }</p>
  </div>
}

online sandbox

That's it. No need to keep a state in the component or update a store. You just use async values where you need them!

As simple as that 🙂

To try Recks 🐶

Clone the template repository:

git clone --depth=1 https://github.com/recksjs/recks-starter-project.git
cd recks-starter-project
npm i
npm start

Or use this online sandbox

The source code is available at github.com/recksjs/recks

The end

header photo by Elena Koycheva on Unsplash