Auto complete với React + Redux + Rxjs, Cancelable.

2 min readApr 5, 2017

Auto complete dường như là thành phần chúng ta thường gặp nhiều nhất trong lúc phát triển các ứng dụng web, một sự kết hợp của React + Redux + Rxjs sẽ giúp chúng ta phát triển auto complete một cách nhẹ nhàng hơn.

Dựa vào yêu cầu của dự án thực hiện với React và Redux, qua tìm hiểu thì mình được biết sự kết hợp với Rxjs từ phía Netflix và dưới đây là cách áp dụng vào trong dự án thật tế.

Kết quả thực hiện, như hình bên dưới

Những request trước bị **“Cancel"** khi chưa kết thúc và request tiếp theo được tạo ra

Như các bạn thấy trong hình, request đầu tiên (Và một số request phía dưới) bị cancel do từ khoá tìm kiếm bị thay đổi và có một request mới.

Thông thường, chúng ta sử dụng Promise để quản lý việc gọi request tới API, nhưng rất không may mắn.

Promise: Không thể cancel

Đó là lý do tại sao chúng ta dùng Rxjs trong trường hợp này. Rxjs có thư viện ajax hổ trợ cho chúng ta, trong trường hợp này là bỏ qua request cũ khi có một request tương tự tới.

Dưới đây là đoạn code để quản lý việc gọi request tới API và cancel request cũ.

export function triggerSearchRequest(action$, store) {
  return action$.ofType(SEARCH_REQUEST)
    .debounceTime(600)
    .map(action => action.payload)
    .switchMap(action => ajax.get(`endpoint?query=${action.query}&page=${action.page}`)
            .map(searchFulfilled)
            .takeUntil(action$.ofType(SEARCH_CANCEL))
            .catch(error => Observable.of({
              type: SEARCH_ERROR,
              payload: error,
              error: true,
            }))
    )
    .catch(e => searchFailed.bind(null, e));
}

Mỗi lần chúng ta dispatch một hành động tới Redux, nếu action == SEARCH_REQUEST thì Rxjs sẽ đợi 600ms và bắt đầu thực hiện gọi ajax.get.

Ajax request sẽ được gọi “takeUntil” cho tới khi xuất hiện một action == SEARCH_CANCEL, Rxjs sẽ cancel ajax.get nếu nó vẫn còn đang thực hiện.

Vây, trường hợp nào chúng ta cần tới cancel request? Không những trong trường hợp auto complete, còn rất nhiều trường hợp khác chúng ta có thể nghĩ tới cancel request. Ví dụ 2 trường hợp phía dưới:

Một popup cho người dùng tìm kiếm thông tin; như vậy mỗi lần đóng popup, chúng ta nên cancel hành động đang tìm kiếm.
Khi truy cập vào một trang, đọc dữ liệu từ server, nhưng người dùng chuyển sang trang khác.

Rxjs có rất nhiều API hỗ trợ tương tác, phần trên chỉ là một phần nhỏ trong bộ API đó.

Hy vọng phần nhỏ này giúp các bạn hiểu về cách dùng, sự kết hợp của React + Redux + Rxjs.

Mời đón xem phần tiếp theo: React Server render

Auto complete với React + Redux + Rxjs, Cancelable.

Written by Duy Nguyen