Williams YEO wyeo

La programmation reactive avec RxJS

La programmation reactive est un paradigme de programmation dont le concept repose sur l'émission de données depuis une ou plusieurs sources (producteurs) à destinations d'autres éléments appelés consommateurs. Elle repose sur le design pattern Observable - Observer implémenté par les observables, aisément manipulable via les operateurs.

Dans l'introduction aux observables, nous avons découvert cet objet permettant de souscrire à une source de donnée avec un Observer. Cette mécanique permet de réagir aux données émisent par l'Observable par le biais de Observer, et cela pendant toute la durée du flux.

Maintenant, voyons comment nous pouvons manipuler ce flux grâce aux opérateurs de transformation.

	class Observable {}

	Observable.of = (...args) => {

	Observable.prototype.subscribe = (nextFn, errorFn, completeFn) => {
	args.map(x => nextFn(x))
	completeFn()
	}

	return new Observable()

	Observable.interval = (period) => {
	Observable.prototype.subscribe = (nextFn) => {
	let i = 0
	const timeout = setInterval((function(){ nextFn(i++) }), period)
	return clearInterval.bind(null, timeout)
	}
	return new Observable()
	}

	const btn = document.getElementById('btn')
	const values = [1, 2, 3, 4, 5]

	function logger(event) {
	console.log(`Logger : ${event}`)
	btn.removeEventListener('click', logger)
	}

	// btn.addEventListener('click', logger)
	// const btn$ = Rx.Observable.fromEvent(btn, 'click')

	import React, { Children } from 'react'
	import ReactDOM from 'react-dom'
	import PropTypes from 'prop-types'
	import Polyglot from 'node-polyglot'

	import messages from './message'

	const locale = window.localStorage.getItem('locale') \|\| 'fr'
	const polyglot = new Polyglot({
	locale,

	import React, { PureComponent } from 'react'
	import PropTypes from 'prop-types'
	import classnames from 'classnames'
	import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
	import { rxForm } from 'rx-react-form'

	import { Button, FontH1 } from 'volt-ui'
	import ValidatedInput from 'components/ValidatedInput'

	import messages from './messages'

-# delete local tag '12345'
-git tag -d 12345
-# delete remote tag '12345' (eg, GitHub version too)
-git push origin :refs/tags/12345
-# alternative approach
-git push --delete origin tagName
-git tag -d tagName

	import { useRef, useEffect, useState } from "react"

	const usePreviousValue = (value: any) => {
	const ref = useRef()
	useEffect(() => {
	ref.current = value
	})
	return ref.current
	}

	(function(root, name, make) {
	if (typeof module != 'undefined' && module['exports']) module['exports'] = make();
	else root[name] = make();
	}(this, 'breakpoint', function() {

	/**
	* @link http://gist.github.com/ryanve/7924792
	* @param {string} feature range feature name e.g. "width"
	* @param {string=} unit CSS unit for feature e.g. "em"
	* @param {number=} init initial guess

Williams YEO wyeo

La programmation reactive avec RxJS

Les opérateurs