bloodyowl

Bienvenue dans la deuxième partie du tutoriel sur les Observables.

Résumé de partie 1

Dans la première partie, nous avons vu que les Observables nous permettent de traiter des données synchrones et asynchrones. Aussi, nous avons vu la méthode subscribe() à laquelle nous appliquons notre Observer afin de consulter les données. Enfin dans le dernier exemple, une méthode unsubscribe() qui va nous permettre en tant que Observer d'avoir la possibilité de decider de ne plus écouter les données émises.

Vous l’aurez compris, les Observables sont surtout utilisés dans l’objectif de manipuler de la donnée asynchrone. Nous allons donc essayer de comprendre, comment est-ce que les données reçue peuvent être manipulées.

Prenons un cas concret pour illustrer notre problématique :

bloodyowl

b=0;$=x=>(p,i="_"+b++,u=($[i]=q=>eval(i).innerHTML=x(p,$[q],u),z=>($[++b]=z,`$.${i}(${b})`)))=>`<c id=${i}>${x(p,[]._,u)}</c>`

bloodyowl

const store = createStore((state = { counter: 0 }, action) => {
  switch(action.type) {
    case "INCREMENT":
      return { counter: state.counter + 1 }
    case "DECREMENT":
      return { counter: state.counter - 1 }
    default:
      return state
  }
})

bloodyowl

fetchURL("/").then(({ responseText }) => console.log(responseText))

const request = fetchURL("/")
request.cancel()
request.then(() => console.log("NOT HAPPENING"))

bloodyowl

const f = ({ foo = "foo", bar = "bar" } = {}, ...args) => ({
  foo,
  [`${ bar }1`]: args,
})

// vs

var f = function(options) {
  var args = [].slice.call(arguments, 1)
  options = options !== undefined ? options : {}

bloodyowl

const merge = (strings, substitutions) =>
  strings.reduceRight((acc, string, index) => [string, substitutions[index], ...acc], [])

const escapeRE = (strings, ...substitutions) =>
  merge(strings, [...substitutions, ""]).map((s) => String(s).replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")

console.log(escapeRE`^foo[foo](${ "(" + 1 + 2 })`) // "\^foo\[foo\]\(\(12\)"

bloodyowl

// signature is (props:object, state:object, setState:function)
function App({ label }, { count = 0 }, setState) {
  return (
    <div>
      <button
        onClick={() => setState({ count: count + 1 })}>
        {label + " " + count}
      </button>
    </div>
  )

bloodyowl

import React, {Component, PropTypes} from "react"

class MyComponent extends Component {

  static propTypes = {
    onClick: PropTypes.func,
  }

  handleClick(event) {
    const {onClick} = this.props

bloodyowl

export function $(value) {
  if(value == null) {
    return []
  }
  if(typeof value === "string") {
    return [...document.querySelectorAll(value)]
  }
  if(typeof value.nodeType === "number") {
    return Array.of(value)
  }

bloodyowl

function first() {
  if(!this.length) {
    return this[0]
  }
  throw new Error("empty list")
}

export default Array.prototype

export function $(selector, root = document) {