Sagas là gì

Saga Là Gì – Nghĩa Của Từ Saga

Redux-Saga là gì?

Redux-Saga là một trong thư viện redux middleware, giúp chủ tịch những side effect trong ứng dụng redux trở nên đơn giản hơn. Bằng sự việc áp dụng tối nhiều công dụng Generators (function*) của ES6, nó cho phép ta viết async code nhìn hệt như là synchronos.

Bài Viết: Saga là gì

Saga không chỉ là sống sót trong toàn cầu javascript, nó còn được coi là một pattern. Bạn cũng tồn tại thể nhìn qua về saga pattern bằng clip này: https://youtu.be/xDuwrtwYHu8

Một giải pháp nhìn nhanh chóng lẹ thì Saga pattern là giải pháp để chủ tịch những long transaction với những side effect hoặc các tiềm ẩn nguy cơ chứa đựng. Với mỗi transaction thắng lợi, chúng ta đều rất cần phải có counter-transaction để revert transaction đó về trạng thái lúc đầu nếu gặp trục trặc. Tìm hiểu thêm thêm thêm về saga pattern với nội dung bài viết của Roman Liutikov : Confusion about Saga pattern

Side effect là gì??

Ta đã biết toàn bộ tổng thể những giải quyết ở REDUCER đều phải là synchronous and pure tức chỉ là giải quyết như nhau. Nhưng trong ứng dụng trong thực tiễn thì nên nhiều hơn thế nữa vậy chẳng hạn như asynchronous (thi công một vài việc như gọi một hàm AJAX để fetch tài liệu về nhưng cần đợi hiệu quả chứ hiệu quả không trả về ngay được) hoặc là impure (thi công lưu, đọc tài liệu ra phía bên ngoài như lưu tài liệu ra ổ cứng hay đọc cookie từ trình duyệt… đều cần đợi hiệu quả). Những việc như thế trong lập trình hàm gọi nó là side effects.

Generator function là gì??

Khác với function đôi chút là tiến hành and trả về hiệu quả, thì Generator function có khả năng tiến hành, tạm dừng trả về hiệu quả and tiến hành bằng tiếp. Từ khóa để gia công được việc đó chính là “YIELD”. Generator được hiện ra giải pháp đây mấy chục năm nhưng đến ES2015 mới được bổ sung cập nhật update, các ngữ điệu khác đã được bổ sung cập nhật update chức năng này như C#, PHP, Ruby, C++, R…

Redux-Saga chuyển động như thế nào??

Nếu như với xúc tích của saga, ta cung cấp một hàm cho saga, chính hàm đó đó là hàm đứng ra cân nhắc các action trước lúc vào store, nếu là action chăm lo thì nó có khả năng sẽ bị tiến hành hàm sẽ được tiến hành, nếu như bạn biết khái niệm hook thì hàm cung cấp cho saga đó chính là hàm hook.Điều nổi bật của hàm hook này nó là một trong generator function, trong generator function này còn có yield and mỗi một khi yield ta sẽ trả về một plain object. Object trả về đó được gọi Effect object. effect object này đơn giản chỉ là một trong object đôi chút nhưng chứa thông báo nổi bật sử dụng để chỉ dẫn middleware của Redux tiến hành các chuyển động khác chẳng hạn như gọi một hàm async khác hay put một action tới store. Để khởi tạo đc effect object đề cập ở trên thì ta gọi hàm từ thư viện của saga là redux-saga/effects.

Tại sao tôi phải áp dụng Saga??

Khi bước đầu tìm tòi về redux, bạn hay tìm cảm nhận thêm các bài hướng dẫn áp dụng redux-thunk hoặc redux-saga để chủ tịch các async action. Vậy tại sao bạn lại được khuyên áp dụng redux-saga ?

Trích dẫn trong document của redux-saga:

Contrary to redux thunk, you don’t end up in callback hell, you can test your asynchronous flows easily và your actions stay pure.

Xem Ngay: Giấy Phép Xây Dựng Tiếng Anh Là Gì, Nghĩa Của Từ Giấy Phép Xây Dựng

Tạm dịch: trái với redux thunk, bạn không nhất thiết phải phát dồ lên với các callback trong những action, đến với saga đi, bạn cũng tồn tại thể test các async action với cùng 1 quy trình đơn giản dễ dàng mà hoàn toàn không làm hư các action đó

Đối chiếu saga and thunk:

redux-thunk

import { API_BUTTON_CLICK, API_BUTTON_CLICK_SUCCESS, API_BUTTON_CLICK_ERROR,} from “./actions/consts”;import { getDataFromAPI } from “./api”;const getDataStarted = () => ({ type: API_BUTTON_CLICK });const getDataSuccess = data => ({ type: API_BUTTON_CLICK_SUCCESS, payload: data })const getDataError = message => ({ type: API_BUTTON_CLICK_ERROR. payload: message });const getDataFromAPI = () => { return dispatch => { dispatch(getDataStarted()); getDataFromAPI() .then(data => { dispatch(getUserSuccess(data)); }).fail(err => { dispatch(getDataError(err.message)); }) };};Tại đây ta có một action creator getDataFromAPI() bước đầu async progress như sau:

Thứ nhất bắn ra action cho phép store biết rằng chuẩn bị sẵn sàng 1 API request ( dispatch(getDataStarted())Tiếp sau thi công API request trả về một PromiseCuối cùng bắn ra success action nếu request thắng lợi hoặc error action nếu có lỗi

redux-saga

import { call, put, takeEvery } from “redux-saga/effects”;import { API_BUTTON_CLICK, API_BUTTON_CLICK_SUCCESS, API_BUTTON_CLICK_ERROR,} from “./actions/consts”;import { getDataFromAPI } from “./api”;export function* apiSideEffect(action) { try { const data = yield call(getDataFromAPI); yield put({ type: API_BUTTON_CLICK_SUCCESS, payload: data }); } catch (e) { yield put({ type: API_BUTTON_CLICK_ERROR, payload: e.message }); }}// the “watcher” – on every “API_BUTTON_CLICK” action, run our side effectexport function* apiSaga() { yield takeEvery(API_BUTTON_CLICK, apiSideEffect);}Cùng một process, nhưng giải pháp implement khác biệt hoàn toàn.

put thay cho dispatchfunction cuối (apiSaga()) giúp theo dõi toàn diện và tổng thể toàn bộ tổng thể các action (tại đây có API_BUTTON_CLICK)Với giải pháp gọi của redux-saga, những chúng ta có thể get data từ bất kể async function nào (promise, …)Đánh Giá

Cả hai giải pháp implement đều dễ đọc, mặc dù vậy nếu với redux-thunk , bạn rất cần phải tuyên chiến đối đầu và cạnh tranh và tuyên chiến và cạnh tranh với cùng 1 tá các promise, các callback nếu có, rất mất thời gian cho những người maintain đọc and tìm code. Với redux-saga , đơn giản bạn chỉ việc track theo try/catch block để theo dõi dòng code, cạnh bên này còn sống sót hàm giúp bạn track các action một giải pháp đơn giản dễ dàng.

Xem Ngay: Ircc Là Gì – Ircc Canada Là Gì

Tóm lại

Ở nội dung bài viết này mình đề cập đến 2 điểm độc đáo và khác biệt chính của redux-saga là giữ cho action pure synchronos theo chuẩn redux and đào thải hoàn toàn callback theo javascript truyền thống. Nội dung bài viết tiếp theo sau mình sẽ đề cập nốt key point ở đầu cuối của saga là easy to test.

Thể Loại: Chia sẻ trình bày trình diễn Kiến Thức Cộng Đồng

Bài Viết: Saga Là Gì – Nghĩa Của Từ Saga

Thể Loại: LÀ GÌ

Nguồn Blog là gì: https://hethongbokhoe.com Saga Là Gì – Nghĩa Của Từ Saga