Nhờ mọi người giải thích giúp mình Redux-Saga

Cách viết while (true) phương pháp giúp bạn controll flow chạy khác so với cách viết thông thường mà bạn đang dùng. Với cách viết thông thường là định nghĩa 1 cái saga sau đó gán 1 action cho saga đó bằng cách dùng takeEvery hoặc takeLatest thì với mỗi action được dispatch nó sẽ liên tục gọi đến cái function saga mà bạn định nghĩa. Còn đối với việc sử dụng while (true) thì thay vì bạn gán trực tiếp 1 action cho 1 function saga như này:

export function* watchFetchPost() {
  yield takeEvery(types.FETCH_POST, workFetchPost);
}

Thì while (true) sẽ chạy như 1 vòng lặp vô tận và bên trong đó bạn sẽ sử dụng hàm take để lắng nghe các action được tạo ra. Một ví dụ cụ thể hơn mình lấy từ chính doc của Redux-saga như sau:

import { take, call, put } from 'redux-saga/effects'
import Api from '...'

function* authorize(user, password) {
  try {
    const token = yield call(Api.authorize, user, password)
    yield put({type: 'LOGIN_SUCCESS', token})
    return token
  } catch(error) {
    yield put({type: 'LOGIN_ERROR', error})
  }
}

function* loginFlow() {
  while (true) {
    const {user, password} = yield take('LOGIN_REQUEST')
    const token = yield call(authorize, user, password)
    if (token) {
      yield call(Api.storeItem, {token})
      yield take('LOGOUT')
      yield call(Api.clearItem, 'token')
    }
  }
}

Khác với cách viết thông thường là mỗi khi bạn tạo ra một action là LOGIN_REQUEST thì nó sẽ lập tức chạy ngay một cái saga nào đó mà bạn gán cho actions đó như này:

export function* login() {
  yield takeEvery(types.LOGIN_SUCCESS, doSomeLogin);
}

• Thì với cách viết dùng while như trên thì cho dù bạn có tạo ra có click cái button để tạo ra action LOGIN_REQUEST bao nhiêu lần thì nó cũng sẽ chỉ nhận đúng lần đầu tiên thôi và không chạy liên tục như cách viết thông thường.
• Thứ 2 là vì đây là vòng lặp (lặp vô hạn) nên sau khi bạn chạy xong cái LOGIN_REQUEST thì cái saga loginFlow này nó sẽ không lắng nghe thêm bất cứ action LOGIN_REQUEST nào nữa mà chỉ đợi action LOGOUT mà thôi vì là vòng lặp mà bạn chưa chạy hết nên nó không chạy lại từ đầu được :v
• Cuối cùng sau khi bạn gọi action LOGOUT thì nó mới kết thúc 1 vòng lặp và mới tiếp tục lắng nghe lại cái action LOGIN_REQUEST. Mọi thứ cứ tiếp diễn như thế mãi mãi.

=> Ở đây 2 action LOGIN_REQUEST và LOGOUT sẽ luôn đi kèm với nhau theo đúng thứ tự trên dưới và chỉ có thể gọi lại khi mà thằng kia đã được gọi như sau:

• LOGOUT sẽ luôn phải đợi 1 action LOGIN_REQUEST chạy trước nó và chạy xong
• LOGIN_REQUEST sau khi chạy 1 lần cũng phải đợi cho đến khi LOGUT chạy xong thì nó mới chạy lại được

Bạn có thể thử xem ví dụ này để hiểu hơn về dfung cái while(): https://codesandbox.io/s/pulling-future-action-e7fll
Ví dụ trên chỉ có 2 action là INCREMENT và DECREMENT và như mình nói ở trên cho dù bạn click bao nhiêu lần INCREMENT liên tiếp đi nữa thì nó cũng chỉ chạy duy nhất lần đầu và nó chỉ chạy lần tiếp theo khi mà bạn ấn DECREMENT. Tương tự thì DECREMENT cũng sẽ không chạy nếu bạn chưa bấm INCREMENT.

Còn về phần fork thì bạn có thể hiểu như sau cái hàm:

yiedl call()

Trong redux-saga nó là một hàm blocking nghĩ là với ví dụ dừ doc của redux-saga:

function* loginFlow() {
  while (true) {
    const {user, password} = yield take('LOGIN_REQUEST')
    const token = yield call(authorize, user, password)
    if (token) {
      yield call(Api.storeItem, {token})
      yield take('LOGOUT')
      yield call(Api.clearItem, 'token')
    }
  }
}

Trong trường hợp đang chạy cái API ở phần const token = yield call(authorize, user, password) nhưng tự nhiên người dùng lại muốn LOGOUT luôn thì như mình nói ở trên là không được vì cái call() kia là blocking nên code ở dưới sẽ không chạy cho đến khi nó chạy xong. Chính vì thế mặc dù ta bấm LOGOUT rồi nhưng nó sẽ bị bỏ qua cho đến khi chạy thành công việc gọi API. Chính vì thể ở đây ta cần dùng hàm fork() như sau:

import { fork, call, take, put } from 'redux-saga/effects'
import Api from '...'

function* authorize(user, password) {
  try {
    const token = yield call(Api.authorize, user, password)
    yield put({type: 'LOGIN_SUCCESS', token})
    yield call(Api.storeItem, {token})
  } catch(error) {
    yield put({type: 'LOGIN_ERROR', error})
  }
}

function* loginFlow() {
  while (true) {
    const {user, password} = yield take('LOGIN_REQUEST')
    yield fork(authorize, user, password)
    yield take(['LOGOUT', 'LOGIN_ERROR'])
    yield call(Api.clearItem, 'token')
  }
}

Khi chúng ta dùng hàm fork thì cái task gọi API kia sẽ đươc tiến hành chạy ở background và không làm chặn cái luồng chạy chính của chúng ta nữa chính ví thể code bên dưới có thể tiếp tục chạy mà không cần đợi phần gọi API chạy xong. Bạn có thể hiểu nôm na là khi dùng fork thì cái công việc mà bạn truyền vào trong đó sẽ được mang ra một chỗ khác để thực hiện chứ không thực hiện ở ngay đó nữa.