Typeahead with React and ActiveJS

function getWikipediaArticles(title: string): Observable<any> {  const url = "https://en.wikipedia.org/w/api.php";  const params = new URLSearchParams({    search: title, // the articles to search for    action: "opensearch",    format: "json", // API response type    origin: "*", // to allow CORS requests    limit: 3 // maximum number of matched results  });  return ajax.getJSON(url + "?" + params);}

export const searchSystem = new AsyncSystem<string, any, any>({  QUERY_UNIT: { dispatchDebounce: true }});

// extract the Observable data Units for easier accessconst {queryUnit, dataUnit, errorUnit, pendingUnit} = searchSystem;

// setup a stream using RxJS operators,// such that at a time only one request is activeconst searchStream = queryUnit.future$ // listen for future values emitted by queryUnit, so that it doesn't start making requests immediately  .pipe(    filter(query => { // process the typed query      if (query.trim()) {        return true; // only proceed if non-empty string      }      dataUnit.clearValue(); // if query is empty, clear the data      return false; // don't go any further    }),    // switchMap to ensure only one request at a time    switchMap(query =>      // create a new HTTP request Observable      getWikipediaArticles(query).pipe(        // format the data, to make it easy to consume        map(formatSearchResults),        // dispatch the formatted data to dataUnit        tap(data => dataUnit.dispatch(data)),        catchError(err => {          errorUnit.dispatch(err); // disptach the error          return EMPTY; // don't let the stream die        })      )    )  )  .subscribe(); // activate the stream// parse and format the data recieved from the Wikipedia REST API// just trust me on this one ;) it takes the response from the Wikipedia API// and turns it into an Array of {title: string, url: string} objectsfunction formatSearchResults([query, titles, noop, urls]) {  return titles.map((title: string, i: number) => ({    title,    url: urls[i]  }));}

function App() {  // create local state to hold the Typeahed data  const [systemValue, setValue] = useState();  // extract the data for easier access  const {query, data, error, pending} = systemValue || {};  // subscribe to the value changes in the searchSystem the   // it will update our local state and trigger re-rendering  useEffect(() => {    const subscription = searchSystem.subscribe(setValue);    return () => subscription.unsubscribe(); // prevent memory leak  }, []);  // dispatch the input value to queryUnit  // to trigger new requests and start the whole process  const handleInput = e => queryUnit.dispatch(e.target.value)  // a rudimentary UI with essential components  return (    <React.Fragment>      <input        onChange={handleInput}        placeholder="Search Wikipedia, eg: Big Bang"      />      {query &&       <p>        IsPending: <b>{pending ? 'Yes' : 'No'} </b> |        Error: <b>{error || 'NA'}</b>      </p>      }      <ul>        {data?.map(item =>           <li>            <a href="{item.url}" target="_blank" rel="noopener">              {item.title}            </a>          </li>        )}      </ul>    </React.Fragment>  );}// render the componentrender(<App />, document.getElementById("root"));