Coding Recipes
  • Introduction
  • Welcome
    • Introduction
  • SEO Recipes
    • How can I add more metadata to my page to improve SEO?
  • Console Recipes
    • How to colour text in the browser and server console
  • Array Recipes
    • How can I filter out falsey values?
  • Object Recipes
    • How can I clone an object?
    • How can I destructure an object?
    • How can I pretty-print an object?
    • How can I conditionally add a key-value into an object?
    • How can I pull keys, values and entries off an object?
    • How can I build an object with computed property names?
    • What does 'this' mean?
    • How does inheritance work between objects?
    • How can I build a query string from an object?
    • How to instantiate a class using an object of that class?
    • Nested Ternaries vs Switch Statements
  • String Recipes
    • How can I tokenise a string of values into an array?
    • How can I parse a template string into its constant and variable parts?
  • Function Recipes
    • How to find out where your function is being called from
    • How can I simplify argument validation in a function?
    • How would I handle errors?
    • What types of functions can I rebind 'this' on?
    • How can I find out the length of a function's parameter list?
  • Asynchronous Recipes
    • How do I use fetch?
    • How do I use Promises?
    • How do I use async and await?
    • How do I use jQuery to make async calls?
    • How can I use Axios to make async calls?
    • How can I use Web Workers to achieve parallelism?
  • React Recipes
    • How can I DRY-up passing props to a React component?
    • How can I conditionally render JSX?
    • What are the different types of PropTypes I can use?
    • How can I handle a component throwing an uncaught exception?
    • How can I use context to selectively pass data down a component hierarchy? (2 approaches)
    • How to define a Higher Order Component (HOC) in React
    • What are the different lifecycle methods in React?
    • HOCs vs. RenderProps - How To Share State
    • How to use refs in React (3 Approaches)
  • React Router Recipes
    • How do I install react router 4 as an application dependency
    • What are the different types of routes that I can create?
    • How can I navigate between different types of routes?
    • How can I style the link for the route that is currently active?
    • How can I pass parameters to my routes?
    • How can I match routes by making sure parameters match a specific format?
    • How can I parse query parameters from a route?
    • How can I define a default catch-all route?
    • How can I render multiple components for a single route?
    • How can I create nested routes?
    • How can I redirect from one route to another route?
    • How can I intercept transitioning from one route to another route?
  • Conditional Logic Recipes
    • How can I avoid using multiple if..else if...else if style code?
    • How can I check which of several booleans is true?
  • RxJS Recipes
    • How can I subscribe to a series of numbers?
    • How can I subscribe to an array of numbers?
    • How can I transform an array of numbers?
    • How can I listen to double-click events?
    • How can I create an Observable from something else?
  • Redux Recipes
    • Redux - Architecture
    • React-Redux - Architecture
    • How to define custom middleware for Redux
    • How to enable Hot Module Reloading for a React-Redux-Webpack application
  • GraphQL
    • How can I create a simple GraphQL client and server?
    • Stuff
Powered by GitBook
On this page

Was this helpful?

  1. RxJS Recipes

How can I create an Observable from something else?

const { Observable } from Rx
const { from, of, pairs, fromEvent, fromPromise } = Observable
const { info } = console

// How can I create a stream of characters from a string
const word = 'abcde'
from(word).subscribe(char => info(char))

// How can I create a stream of strings from an array
const animals = ['ape', 'bat', 'cat']
from(animals).subscribe(animal => info(animal))

// How can I create a stream of name-value pairs from an object
const insects = { a: 'ant', b: 'bee', c: 'centipede'}
pairs(insects).subscribe(insect => info(insect))

// How can I create a stream of values from a list of numbers
of(1, 2, 3).subscribe(value => info(value))

// How can I create a stream of events from a click on a button
const button = document.querySelector('.btn')
fromEvent(button, 'click').subscribe(event => info('clicked'))

// How can I create an Observable from a Promise
const url = 'https://swapi.co/api/people/1'
fromPromise(fetch(url).then(response => response.json()))
  .subscribe(data => info(data))

// How can I get a count of total clicks accumulated so far
fromEvent(button, 'click').scan((x, y) => x + 1, 0).subscribe(count => info(count))

// How can I make multiple asynch requests
const ids = [1, 2, 3]
from(ids)
  .map(id => `https://swapi.co/api/people/${id}`)
  .flatMap(url => fetch(url))
  .flatMap(response => response.json())
  .subscribe(x => info(x.name))

// How can I create an Observable that returns custom values?
new Observable((observer) => {
  observer.next('first-value')
  observer.next('second-value')
  observer.complete()
  }).subscribe(value => info(value))

// What is the correct way to import RxJS to reduce page bloat?
import { Observable } from 'rxjs/Observable'
PreviousHow can I listen to double-click events?NextRedux - Architecture

Last updated 5 years ago

Was this helpful?