Tìm hiểu về Redux saga

Mở đầu

Trong các bài viết trước thì mình đã giới thiệu với mọi người về react, redux và luồng hoạt động của 1 ứng dụng khi sử dụng redux

Tìm hiểu về Redux saga

Như mọi người có thể thấy trong hình ảnh trên khi 1 Motion được dispatch đến Reducer thì nó có chạy qua Middleware, vậy Middleware này thực sự có nhiệm vụ là gì?

Trong Redux, Middleware là lớp nằm giữa ReducersActions. Vị trí mà Middleware hoạt động là trước khi Reducers nhận được Actions và sau khi 1 Motion được dispatch. Middleware trong Redux được biết đến nhiều nhất trong việc xử lý 1 thao tác bất đồng bộ – thông thường ở đây là các API request.

Trong Redux có 2 thư viện khá nổi tiếng dùng để làm nhiệm vụ giống như 1 middleware đó là Redux-thunkRedux-saga. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về Redux-saga được triển khai như thế nào trong Redux nhé.

Redux-saga là gì?

Redux-Saga là một thư viện redux middleware, giúp quản lý những aspect impact trong ứng dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối đa tính năng Mills (operate*) của ES6, nó cho phép ta viết async code nhìn giống như là synchronos.

Có Thể Bạn Quan Tâm :   Tạo Pull request đúng cách

Vậy aspect impact là cái gì nhỉ? Như mọi người đã biết tất cả các xử lý trong Reducers đều là đồng bộ, nhưng thực tế là có những thao tác mà ta bắt buộc phải xử lý bất đồng bộ, ví dụ như là đợi 1 request dùng để fetch dữ liệu về rồi sau đó mới thực hiện tiếp các thao tác khác (thay đổi state, dispatch 1 motion bất kỳ…) đó chính là aspect impact.

Cấu trúc của 1 saga

Bình thường 1 saga sẽ có dạng như thế này:

import { put, name, takeEvery } from ‘redux-saga/results’; operate* someSaga() { // Watch for (each) SOME_ACTION motion takeEvery(‘SOME_ACTION’, doSomeThing); } operate* doSomeThing(motion}) { attempt { // Inform redux-saga to name fetchSomeThing with the param from motion yield name(fetchSomeThing, motion.payload) // Inform redux-saga to dispatch the someThingSuccess motion yield put(someThingSuccess()) } catch (err) { // You get it yield put (someThingFailed(err)) } }

Có Thể Bạn Quan Tâm :   Tiếng lóng là gì? Ý nghĩa những tiếng lóng giới trẻ đang sử dụng nhiều nhất hiện nay

Tron ví dụ trên, các technique mà redux-saga cung cấp put, name, takeEvery chính là các aspect impact mà chúng ta đang đề cập đến. Ngoài ra thì còn có 1 số các impact khác hay dùng như là: fork, choose, takeLatest, take, all.

Sau đây sẽ là nhiệm vụ chính của từng technique:

  • put: Có nhiệm vụ dispatch 1 motion
  • name: Dùng để name 1 operate. Nếu nó return về một promise, tạm dừng saga cho đến khi promise được giải quyết
  • takeEvery: Thực thi và trả lại kết quả của mọi actions được gọi.
  • takeLatest: Nếu chúng ta thực hiện một loạt các actions, nó sẽ chỉ trả lại kết quả của actions cuối cùng.
  • Choose: Name 1 selector để lấy knowledge từ retailer.
  • fork: Thực hiện một hoạt động non-blocking trên operate được truyền cho nó.
  • take: Tạm dừng cho đến khi nhận được motion.
  • all: Thực hiện tune tune tất cả các saga.

Ví dụ

import { name, put, takeLatest, fork, choose, all } from ‘redux-saga/results’; import { selectUser } from ‘./selectors’; import { GET_USER } from ‘./constants’; const requestGetUser = async userId => { // Tạo 1 operate dùng để fetch knowledge const choices = { question: { $choose: [‘name’, ’email’], }, }; return await feathers.relaxation.service(‘customers’).get(userId, choices); }; operate* getUser() { attempt { const userId = yeild choose(selectUser()); // dùng choose để gọi selector `selectUser` và get userId từ retailer const response = yield name(requestGetUser, // userId); name operate `requestGetUser` yield put(getUserSucceed(response); // dispatch motion `getUserSucceed` khi có response trả về } catch (err) { yield put(getUserFailed(err)); // dispatch motion `getUserFailed` khi có lỗi xảy ra } } operate* getUserWatcher() { yield takeLatest(GET_USER, getUser); // Lắng nghe việc dispatch motion là GET_USER đồng thời thực thi getUser mỗi khi được gọi } export default operate* watchSaga() { yield all([fork(getUserWatcher)]) }

Có Thể Bạn Quan Tâm :   2k9 mấy tuổi, 2k9 là học lớp mấy ?

Kết

Bên trên là 1 ví dụ điển hình cho việc sử dụng các impact của redux-saga. Ngoài ra, để có thể hiểu thêm chi tiết về redux saga thì các bạn hãy tìm đọc ở trang chủ để nắm rõ hơn về một số vần đề như cách Inject Saga Middleware vào Redux Retailer, Cancel saga, hay cấu hình của redux saga cho 1 dự án.

Back to top button