Saga là gì

Redux-Saga là gì?

Redux-Saga là 1 trong những thỏng viện redux middleware, góp quản lý các side effect vào vận dụng redux trsinh hoạt buộc phải dễ dàng hơn. Bằng vấn đề áp dụng về tối nhiều kỹ năng Generators (function*) của ES6, nó có thể chấp nhận được ta viết async code chú ý y hệt như là synchronos.

Bạn đang xem: Saga là gì

Saga không chỉ có trường tồn vào trái đất javascript, nó còn được coi là 1 pattern. Quý khách hàng hoàn toàn có thể xem qua về saga pattern bằng clip này: https://youtu.be/xDuwrtwYHu8

Một ý kiến mau lẹ thì Saga pattern là phương pháp để làm chủ mọi long transaction cùng với đầy đủ side effect hoặc các nguy cơ tiềm ẩn tiềm tàng. Với từng transaction thành công, họ đầy đủ cần phải có counter-transaction nhằm revert transaction kia về tâm lý thuở đầu ví như gặp gỡ trục sái. Tđam mê khảo thêm về saga pattern cùng với bài viết của Roman Liutikov : Confusion about Saga pattern

Side effect là gì??

Ta sẽ biết toàn bộ phần đa xử lý nghỉ ngơi REDUCER đều yêu cầu là synchronous cùng pure tức chỉ là cách xử trí nhất quán. Nhưng vào áp dụng thực tế thì nên nhiều hơn thế nữa vậy ví như asynchronous (triển khai một trong những bài toán nhỏng call một hàm AJAX để fetch dữ liệu về nhưng lại phải đợi công dụng chứ tác dụng không trả về tức thì được) Hay những impure (thực hiện lưu, đọc tài liệu ra phía bên ngoài nhỏng lưu tài liệu ra ổ cứng xuất xắc gọi cookie từ trình duyệt… rất nhiều phải đợi kết quả). Những bài toán như thế trong xây dựng hàm điện thoại tư vấn nó là side effects.

Generator function là gì??

Khác cùng với function bình thường là thực thi và trả về tác dụng, thì Generator function có thể xúc tiến, tạm dừng trả về tác dụng cùng thực hiện bởi tiếp. Từ khóa để gia công được vấn đề đó là “YIELD”. Generator được chỉ dẫn từ thời điểm cách đây mấy chục năm nhưng mà đến ES2015 mới được bổ sung cập nhật, các ngữ điệu khác đã có bổ sung hào kiệt này hệt như C#, PHPhường, Ruby, C++, R…

Redux-Saga hoạt động như vậy nào??

Đối với lô ghích của saga, ta hỗ trợ một hàm đến saga, chủ yếu hàm này là hàm đứng ra cẩn thận những action trước lúc vào store, nếu như là action quyên tâm thì nó vẫn tiến hành hàm sẽ tiến hành xúc tiến, nếu khách hàng biết tư tưởng hook thì hàm cung cấp mang lại saga chính là hàm hook.Điều đặc trưng của hàm hook này nó là một trong những generator function, vào generator function này có yield và mỗi một khi yield ta đang trả về một plain object. Object trả về này được gọi Effect object. effect object này dễ dàng và đơn giản chỉ là một trong những object bình thường nhưng đựng biết tin quan trọng đặc biệt dùng để làm hướng dẫn middleware của Redux thực hiện những hoạt động không giống ví dụ như Hotline một hàm async không giống tuyệt put một action tới store. Để tạo ra effect object nhắc sinh sống bên trên thì ta Call hàm trường đoản cú thư viện của saga là redux-saga/effects.

*

Tại sao tôi nên sử dụng Saga??

Lúc bước đầu tìm kiếm tòi về redux, chúng ta giỏi kiếm tìm thấy các bài bác lí giải sử dụng redux-thunk hoặc redux-saga để quản lý các async action. Vậy tại vì sao chúng ta lại được khuim áp dụng redux-saga ?

Trích dẫn vào document của redux-saga:

Contrary to redux thunk, you don’t end up in callbaông chồng hell, you can demo your asynchronous flows easily & your actions stay pure.

Xem thêm: Refresh Là Gì - Refresh Trong Tiếng Tiếng Việt

Tạm dịch: trái cùng với redux thunk, bạn không cần thiết phải phát dồ lên với các callback trong những action, mang lại với saga đi, chúng ta cũng có thể chạy thử các async action với 1 quá trình dễ dàng mà lại không có tác dụng lỗi các action kia

*

So sánh saga cùng 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)); ) ;;Ở đây ta tất cả một action creator getDataFromAPI() ban đầu async progress nlỗi sau:

Thứ nhất bắn ra action được cho phép store hiểu được chuẩn bị 1 API request ( dispatch(getDataStarted())Tiếp theo thực hiện API request trả về một PromiseCuối cùng bắn ra success action nếu như request thành công hoặc error action trường hợp bao gồm lỗi

redux-saga

import Hotline, 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, tuy thế biện pháp implement khác nhau hoàn toàn.

put vắt mang lại dispatchfunction cuối (apiSaga()) giúp quan sát và theo dõi tổng thể và toàn diện cục bộ những action (ở chỗ này tất cả API_BUTTON_CLICK)Với giải pháp hotline của redux-saga, chúng ta cũng có thể get data trường đoản cú bất kì async function làm sao (promise, ...)Nhận xét

Cả 2 cách implement hồ hết đọc dễ, tuy nhiên so với redux-thunk , chúng ta buộc phải tuyên chiến đối đầu và cạnh tranh với cùng một tá các promise, những callbaông xã giả dụ bao gồm, rất rất lâu cho tất cả những người maintain đọc cùng kiếm tìm code. Với redux-saga , đơn giản và dễ dàng bạn chỉ việc traông chồng theo try/catch bloông chồng nhằm theo dõi và quan sát mẫu code, không chỉ có thế còn tồn tại hàm giúp bạn track các action một bí quyết tiện lợi.

Xem thêm: S.M.A.C Là Gì ? Tại Sao Smac Lại Trở Thành Xu Hướng? Phân Tích Dữ Liệu Lớn Smac Là Gì

Kết luận

Tại bài viết này mình đề cập tới 2 điểm nổi bật chính của redux-saga là giữ mang lại action pure synchronos theo chuẩn redux và thải trừ trọn vẹn callbaông xã theo javascript truyền thống. Bài viết tiếp theo sau mình sẽ kể nốt key point sau cùng của saga là easy to test.


Chuyên mục: Kiến Thức