Typeahead with React and ActiveJS

We're going to build a Typeahead component using React, ActiveJS, and RxJS. We'll search for Wikipedia articles in the example but we can point it to any REST API once we have the setup in place.

S.No.	Content
1.	HTTP Request logic using Observable HTTP API - Provided by RxJS
2.	Asynchronous State Management - Provided by ActiveJS
3.	Query and response handling
4.	React Component

1. HTTP Request logic

First, we create a function that takes the search string and fetches results from the Wikipedia API using the ajax HTTP utility provided by RxJS.

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);
}

ajax.getJSON returns a cold Observable, i.e. It will only make the HTTP request when we subscribe to it. And canceling a pending request is as easy as unsubscribing from this Observable, which is a necessity for the Typeahead because we want to keep only one request active at a time to prevent race conditions and save some resources.

URLSearchParams is a native API that, among other things, can easily convert and encode an object into query-parameters. e.g.: {a: 'b', c: 'd&d'} becomes a=b&c=d%26d.

2. State Management using ActiveJS AsyncSystem

To handle all the nitty-gritty aspects of an asynchronous task we'll use an AsyncSystem, it takes care of all the state-management we're going to need for the Typeahead. We'll pass our search-query, response-data, and response-error through it, and access the same from it whenever/wherever we need them.

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

dispatchDebounce exactly does what it implies, it debounces the queries for 200ms by default, and we can also pass a custom number if we want.

The AsyncSystem gives us four Observable data Units pertaining to every aspect of an asynchronous API request. We'll extract these data Units for ease of use.

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

queryUnit to store, and share the queries, and to trigger the API call
dataUnit to store, and share the response-data
errorUnit to store, and share the response-error
pendingUnit to store, and share the pending-status (This happens automatically. When we dispatch to queryUnit it becomes true, and when we dispatch to dataUnit or errorUnit it becomes false)

3. Query and Response handling

We already have HTTP Service and State Management in place, now we just need to connect them together and set up the mechanism for Typeahead, such that whenever the queryUnit emits a value we trigger a search request, and also cancel any pending request at the same time.

// setup a stream using RxJS operators,
// such that at a time only one request is active
const 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} objects
function formatSearchResults([query, titles, noop, urls]) {
  return titles.map((title: string, i: number) => ({
    title,
    url: urls[i]
  }));
}

4. React Component

We're in the endgame now, we just need a simple React component and Hooks to finalize our Typeahead.

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 component
render(<App />, document.getElementById("root"));

That's it, folks, we're done!

Here's the result of our labor.

Let me know if it was helpful, or if it's too much too fast.

If you liked the solution, then you'd like what ActiveJS has to offer, it's a one-stop solution for all your State Management needs, be it sync or async, persistence or immutability, time-travel or less-code, it's all there. (no reducers though)

Cheers

🌏 ActiveJS Website
📖 ActiveJS Documentation
🤾‍♂️ ActiveJS Playground
💻 ActiveJS GitHub Repo (drop a ⭐ maybe :)

Blog

Typeahead with React and ActiveJS

Ankit Singh

Table of contents

1. HTTP Request logic

2. State Management using ActiveJS AsyncSystem

3. Query and Response handling

4. React Component

Join Our Newsletter. No Spam, Only the good stuff.

Related