Hogyan építsük fel a GitHub keresési funkcionalitást a React with RxJS 6 és az Újrakomponálás szolgáltatásban

Ez a bejegyzés azoknak szól, akiknek van React és RxJS tapasztalata. Csak olyan mintákat osztok meg, amelyeket hasznosnak találtam a felhasználói felület készítése közben.

A következőt építjük:

Nincs osztály, életciklus-horog, vagy setState.

Beállít

Minden a GitHubomon van.

git clone //github.com/yazeedb/recompose-github-ui cd recompose-github-ui yarn install 

A masterfióknak elkészült a projektje, ezért startha folytatni szeretné, fizesse meg a fiókot.

git checkout start

És futtassa a projektet.

npm start

Az alkalmazásnak futnia kell localhost:3000, és itt van a kezdeti felhasználói felületünk.

Nyissa meg a projektet a kedvenc szövegszerkesztőben és nézze meg src/index.js.

Újrakomponálni

Ha még nem látta, a Recompose egy csodálatos React segédszalag funkcionális programozási stílusú alkatrészek készítéséhez. Rengeteg funkciója van, és nehezen tudnám kiválasztani a kedvenceimet.

Lodash / Ramda, de a React számára. Szeretem azt is, hogy támogatják a megfigyelhetőséget. Idézve a dokumentumokból:

Kiderült, hogy a React Component API nagy része megfigyelhetőséggel fejezhető ki

Ma ezt a koncepciót fogjuk gyakorolni! ?

Komponensünk közvetítése

Jelenleg Appegy hétköznapi React komponens. Megfigyelhető módon visszaküldhetjük a Recompose komponensFromStream függvényével.

Ez a függvény kezdetben nullkomponentté alakít, és újra megjelenít, amikor a megfigyelhető értékünk új értéket ad vissza.

Egy kötőjel konfiguráció

Az újraszerkesztés az ECMAScript Observable javaslat szerint történik. Meghatározza, hogy a megfigyelhetőeknek hogyan kell működniük, amikor végül modern böngészőkhöz szállítják őket.

Amíg nem valósítják meg teljes mértékben, olyan könyvtárakra támaszkodunk, mint az RxJS, az xstream, a most, a Flyd és így tovább.

Az újraszerkesztés nem tudja, melyik könyvtárat használjuk, ezért biztosítja az setObservableConfigES megfigyelhető fájlok konvertálását bárhová / bárhonnan, amire szükségünk van.

Hozzon létre egy új fájlt a srcnevezett observableConfig.js.

És adja hozzá ezt a kódot, hogy az Újrakomponálás kompatibilis legyen az RxJS 6-tal:

import { from } from 'rxjs'; import { setObservableConfig } from 'recompose'; setObservableConfig({ fromESObservable: from }); 

Importálja ide index.js:

import './observableConfig'; 

És készen állunk!

Újrakomponálás + RxJS

Importálás componentFromStream.

import React from 'react'; import ReactDOM from 'react-dom'; import { componentFromStream } from 'recompose'; import './styles.css'; import './observableConfig'; 

És kezdje el az újradefiniálást Appezzel a kóddal:

const App = componentFromStream((prop$) => { // ... }); 

Figyelem, componentFromStreamamely visszahívási funkciót igényel egy prop$adatfolyamra. Az elképzelés az, hogy propsmegfigyelhetővé váljunk, és a React komponenshez kapcsoljuk őket.

És ha használta az RxJS-t, akkor tudja, hogy a tökéletes operátor hogyan térképezi fel az értékeket.

Térkép

Ahogy a neve is mutatja, akkor átalakítja Observable(something)a Observable(somethingElse). A mi esetünkben Observable(props)a Observable(component).

Importálja az mapoperátort:

import { map } from 'rxjs/operators'; 

És újradefiniálja az alkalmazást:

const App = componentFromStream((prop$) => { return prop$.pipe( map(() => ( )) ); }); 

Az RxJS 5 óta pipeaz operátorok láncolása helyett használjuk .

Mentse el és ellenőrizze a felhasználói felületét, ugyanaz az eredmény!

Eseménykezelő hozzáadása

Most inputegy kicsit reaktívabbá tesszük .

Importálja a createEventHandlerRecompose mappából.

import { componentFromStream, createEventHandler } from 'recompose'; 

És használja így:

const App = componentFromStream((prop$) => { const { handler, stream } = createEventHandler(); return prop$.pipe( map(() => ( {' '} )) ); }); 

createEventHandlerkét érdekes tulajdonságú tárgy: handlerés stream.

A motorháztető alatt handleregy eseménykibocsátó tolja az értékeket stream, ami megfigyelhető módon közvetíti ezeket az értékeket előfizetőinek.

Tehát egyesítjük a streammegfigyelhetőt és a prop$megfigyelhetőt, hogy hozzáférjünk a inputjelenlegi értékéhez.

combineLatest itt jó választás.

Csirke és tojás probléma

To use combineLatest, though, both stream and prop$ must emit. stream won’t emit until prop$ emits, and vice versa.

We can fix that by giving stream an initial value.

Import RxJS’s startWith operator:

import { map, startWith } from 'rxjs/operators'; 

And create a new variable to capture the modified stream.

const { handler, stream } = createEventHandler(); const value$ = stream.pipe( map((e) => e.target.value), startWith('') ); 

We know that stream will emit events from input's onChange, so let’s immediately map each event to its text value.

On top of that, we’ll initialize value$ as an empty string — an appropriate default for an empty input.

Combining It All

We’re ready to combine these two streams and import combineLatest as a creation method, not as an operator.

import { combineLatest } from 'rxjs'; 

You can also import the tap operator to inspect values as they come:

import { map, startWith, tap } from 'rxjs/operators'; 

And use it like so:

const App = componentFromStream((prop$) => { const { handler, stream } = createEventHandler(); const value$ = stream.pipe( map((e) => e.target.value), startWith('') ); return combineLatest(prop$, value$).pipe( tap(console.warn), map(() => ( )) ); }); 

Now as you type, [props, value] is logged.

User Component

This component will be responsible for fetching/displaying the username we give it. It’ll receive the value from App and map it to an AJAX call.

JSX/CSS

It’s all based off this awesome GitHub Cards project. Most of the stuff, especially the styles, is copy/pasted or reworked to fit with React and props.

Create a folder src/User, and put this code into User.css:

And this code into src/User/Component.js:

The component just fills out a template with GitHub API’s standard JSON response.

The Container

Now that the “dumb” component’s out of the way, let’s do the “smart” component:

Here’s src/User/index.js:

import React from 'react'; import { componentFromStream } from 'recompose'; import { debounceTime, filter, map, pluck } from 'rxjs/operators'; import Component from './Component'; import './User.css'; const User = componentFromStream((prop$) => { const getUser$ = prop$.pipe( debounceTime(1000), pluck('user'), filter((user) => user && user.length), map((user) =>

{user}

) ); return getUser$; }); export default User;

We define User as a componentFromStream, which returns a prop$ stream that maps to an

.

debounceTime

Since User will receive its props through the keyboard, we don’t want to listen to every single emission.

When the user begins typing, debounceTime(1000) skips all emissions for 1 second. This pattern’s commonly employed in type-aheads.

pluck

This component expects prop.user at some point. pluck grabs user, so we don’t need to destructure our props every time.

filter

Ensures that user exists and isn’t an empty string.

map

For now, just put user inside an

tag.

Hooking It Up

Back in src/index.js, import the User component:

import User from './User';

And provide value as the user prop:

return combineLatest(prop$, value$).pipe( tap(console.warn), map(([props, value]) => ( {' '} )) ); 

Now your value’s rendered to the screen after 1 second.

Good start, but we need to actually fetch the user.

Fetching the User

GitHub’s User API is available here. We can easily extract that into a helper function inside User/index.js:

const formatUrl = (user) => `//api.github.com/users/${user}`; 

Now we can add map(formatUrl) after filter:

You’ll notice the API endpoint is rendered to the screen after 1 second now:

But we need to make an API request! Here comes switchMap and ajax.

switchMap

Also used in type-aheads, switchMap’s great for literally switching from one observable to another.

Let’s say the user enters a username, and we fetch it inside switchMap.

What happens if the user enters something new before the result comes back? Do we care about the previous API response?

Nope.

switchMap will cancel that previous fetch and focus on the current one.

ajax

RxJS provides its own implementation of ajax that works great with switchMap!

Using Them

Let’s import both. My code is looking like this:

import { ajax } from 'rxjs/ajax'; import { debounceTime, filter, map, pluck, switchMap } from 'rxjs/operators'; 

And use them like so:

const User = componentFromStream((prop$) => { const getUser$ = prop$.pipe( debounceTime(1000), pluck('user'), filter((user) => user && user.length), map(formatUrl), switchMap((url) => ajax(url).pipe( pluck('response'), map(Component) ) ) ); return getUser$; }); 

Switch from our input stream to an ajax request stream. Once the request completes, grab its response and map to our User component.

We’ve got a result!

Error handling

Try entering a username that doesn’t exist.

Even if you change it, our app’s broken. You must refresh to fetch more users.

That’s a bad user experience, right?

catchError

With the catchError operator, we can render a reasonable response to the screen instead of silently breaking.

Import it:

import { catchError, debounceTime, filter, map, pluck, switchMap } from 'rxjs/operators'; 

And stick it to the end of your ajax chain.

switchMap((url) => ajax(url).pipe( pluck('response'), map(Component), catchError(({ response }) => alert(response.message)) ) ); 

At least we get some feedback, but we can do better.

An Error Component

Create a new component, src/Error/index.js.

import React from 'react'; const Error = ({ response, status }) => ( 

Oops!

{status}: {response.message}

Please try searching again.

); export default Error;

This will nicely display response and status from our AJAX call.

Let’s import it in User/index.js:

import Error from '../Error'; 

And of from RxJS:

import { of } from 'rxjs'; 

Remember, our componentFromStream callback must return an observable. We can achieve that with of.

Here’s the new code:

ajax(url).pipe( pluck('response'), map(Component), catchError((error) => of()) ); 

Simply spread the error object as props on our component.

Now if we check our UI:

Much better!

A Loading Indicator

Normally, we’d now require some form of state management. How else does one build a loading indicator?

But before reaching for setState, let’s see if RxJS can help us out.

The Recompose docs got me thinking in this direction:

Instead of setState(), combine multiple streams together.

Edit: I initially used BehaviorSubjects, but Matti Lankinen responded with a brilliant way to simplify this code. Thank you Matti!

Import the merge operator.

import { merge, of } from 'rxjs'; 

When the request is made, we’ll merge our ajax with a Loading Component stream.

Inside componentFromStream:

const User = componentFromStream((prop$) => { const loading$ = of(

Loading...

); // ... });

A simple h3 loading indicator turned into an observable! And use it like so:

const loading$ = of(

Loading...

); const getUser$ = prop$.pipe( debounceTime(1000), pluck('user'), filter((user) => user && user.length), map(formatUrl), switchMap((url) => merge( loading$, ajax(url).pipe( pluck('response'), map(Component), catchError((error) => of()) ) ) ) );

I love how concise this is. Upon entering switchMap, merge the loading$ and ajax observables.

Since loading$ is a static value, it’ll emit first. Once the asynchronous ajax finishes, however, it’ll emit and be displayed on the screen.

Before testing it out, we can import the delay operator so the transition doesn’t happen too fast.

import { catchError, debounceTime, delay, filter, map, pluck, switchMap, tap } from 'rxjs/operators'; 

And use it just before map(Component):

ajax(url).pipe( pluck('response'), delay(1500), map(Component), catchError((error) => of()) ); 

Our result?

I’m wondering how far to take this pattern and in what direction. Please share your thoughts!