Racing Effect Redux Saga Thường Được Sử Dụng Khi Nào

Racing Effect Redux Saga thường được sử dụng khi nào

Racing effect trong redux-saga chắc hẳn nhiều bạn khi làm việc với redux-saga đã được nghe tới hoặc dùng qua. Vậy Racing Effect Redux Saga thường được sử dụng khi nào

Race effect được sử dụng hiểu nôm nha như cái tên của nó là hiệu ứng cuộc đua, cuộc đua ở đây là gì, đó là cuộc đua giữa nhiều Effect trong redux-saga

Thỉnh thoảng chúng ta muốn chạy một lúc nhiều nhiệm vụ đồng thời hoặc song song, nhưng lại không muốn đợi cho tất cả chạy xong hết, mà chỉ cần 1 cái thắng, là kết thúc nhiệm vụ nhanh nhất ( có thể là nhiệm vụ đó được giải quyết (resolve) hoặc huỷ bỏ (reject) ), và race effects ra đời để kích hoạt nhiệm vụ này.

Bạn theo dõi ví dụ ở phía bên dưới:

import { race, take, put } from 'redux-saga/effects'
import { delay } from 'redux-saga'

function* fetchPostsWithTimeout() {
  const {posts, timeout} = yield race({
    posts: call(fetchApi, '/posts'),
    timeout: call(delay, 1000)
  })

  if (posts)
    put({type: 'POSTS_RECEIVED', posts})
  else
    put({type: 'TIMEOUT_ERROR'})
}

Ở đoạn mã trên chúng ta có 1 hàm chức năng xử lý lấy dữ liệu từ remote server, và dùng race effect để mục đích là, nếu trong thời gian 1 giây (call(delay, 1000)), tác vụ request chưa lấy được dữ liệu trả về (resolve hoặc reject),

thì nó sẽ trả về 2 biến mà ta đã thu thập:

const {posts, timeout} = yield race({
    posts: call(fetchApi, '/posts'),
    timeout: call(delay, 1000)
  })

• posts để lưu kết quả của remote api
• timeout là kết quả delay 1 giây

Trường hợp remote api ít hơn 1 giây là call(fetchApi, ‘/posts’) thắng thì biến posts có giá trị, timeout undefined
Trường hợp remote api sau 1 giấy chưa chạy xong, thì biến posts undefined, timeout có giá trị là 1

và kết quả của đoạn mã đầu, sẽ dispatch 1 action {type: ‘POSTS_RECEIVED’, posts} nếu 1 giấy remote api có kết quả, còn ngược lại dispatch action {type: ‘TIMEOUT_ERROR’}

Một trường hợp khác là race effect được sử dụng để huỷ 1 nhiệm vụ đang thực thi chưa xong, theo dõi đoạn mã bên dưới:

import { race, take, put } from 'redux-saga/effects'

function* backgroundTask() {
  while (true) { ... }
}

function* watchStartBackgroundTask() {
  while (true) {
    yield take('START_BACKGROUND_TASK')
    yield race({
      task: call(backgroundTask),
      cancel: take('CANCEL_TASK')
    })
  }
}

nghĩa là gì, khi ta có 1 action là ‘START_BACKGROUND_TASK‘ thì race effect được gọi để đo cuộc đua của 2 effect:
1. call(backgroundTask): 1 task xử lý ngầm nhiệm vụ gì đó
2. take(‘CANCEL_TASK’): 1 task đợi action là ‘CANCEL_TASK’ gởi tới

Nếu trong quá trình đang chạy task backgroundTask mà action đươc gởi tới là ‘CANCEL_TASK’ có nghĩa là nhiệm vụ 2 thưc thi xong, nó chiến thắng được nhiệm vụ 1, và nhiệm vụ 1 bị huỷ

Mình vừa mô tả cái trường hợp hay sài về race effect, tham khảo thêm https://redux-saga.js.org/docs/advanced/RacingEffects.html