Redux-Saga là gì?

Redux-Saga là 1 trong tlỗi viện redux middleware, cứu vãn quản lí trị những side effect vào phần mềm redux cũng trở thành dễ chơi rộng. Bằng bài toán yêu cầu sử dụng tối nhiều tính năng Generators (function*) của ES6, nó được phnghiền ta viết async code nhìn tương tự là synchronos.

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

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

Saga không những sống thọ trong trái đất javascript, nó còn đc coi là 1 pattern. Quý khách hàng cũng hoàn toàn có thể nhìn qua về saga pattern bằng clip này: https://youtu.be/xDuwrtwYHu8

Một cách thức chú ý nhanh khô nhanh lẹ thì Saga pattern là phương thức nhằm quản trị các long transaction với các side effect hoặc phần đông nguy hại tiềm ẩn. Với mỗi transaction thành công, các bạn hầu hết rất cần được tất cả counter-transaction để revert transaction đó về tâm trạng bước đầu nếu như gặp gỡ trục trệu. Ttê mê khảo thêm 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 đang biết toàn cục những cách xử lý sống REDUCER các đề nghị là synchronous và pure tức chỉ cần xử trí nhất quán. Nhưng trong phần mềm thực tiễn thì cần nhiều hơn vậy ví như asynchronous (triển khai một trong những câu hỏi nhỏng gọi một hàm AJAX để fetch dữ liệu về cơ mà phải hóng tác dụng chứ tác dụng ko trả về tức thì đc) hay những impure (triển khai lưu lại, gọi dữ liệu ra phía quanh đó nhỏng lưu dữ liệu ra ổ cứng xuất xắc hiểu cookie từ bỏ trình duyệt… số đông đề xuất ngóng kết quả). Các Việc như thế trong lập trình sẵn hàm Hotline nó là side effects.


Generator function là gì??

Khác với function thỉnh phảng phất là thực hiện & trả về tác dụng, thì Generator function có thể tiến hành, tạm dừng trả về kết quả và triển khai bằng tiếp. Từ khóa để gia công đc vấn đề này là “YIELD”. Generator được đặt ra phương pháp đây mấy chục năm mà lại đến ES2015 new đc bổ sung cập nhật, rất nhiều ngôn ngữ không giống sẽ được bổ sung cập nhật công dụng nàgiống hệt như C#, PHPhường., Ruby, C++, R…

Redux-Saga chuyển động như vậy nào??

So với súc tích của saga, ta đáp ứng một hàm cho saga, chủ yếu hàm đó chính là hàm đứng ra chu đáo phần nhiều action trước khi vào store, nếu là action quan tâm thì nó sẽ ảnh hưởng thực hiện hàm và để được thực hiện, nếu bạn biết quan niệm hook thì hàm cung ứng cho saga này là hàm hook.Điều tuyệt đỉnh của hàm hook này nó là một trong những generator function, trong generator function này có yield & mỗi lúc yield ta đã trả về một plain object. Object trả về đó đc Hotline Effect object. effect object này dễ chơi chỉ là một object thỉnh thoảng tuy vậy chứa ban bố tiêu biểu vận dụng nhằm chỉ dẫn middleware của Redux thực thi số đông vận động khác ví như điện thoại tư vấn một hàm async khác giỏi put một action cho tới store. Để tạo được effect object nhắc ngơi nghỉ chi phí a trên thì ta Điện thoại tư vấn hàm từ thư viện của saga là redux-saga/effects.


*

Tại sao tôi nên yêu cầu áp dụng Saga??


Khi mở đầu kiếm tìm tòi về redux, các bạn giỏi kiếm tìm cảm nhận thêm những bài xích hướng dẫn cần thực hiện redux-thunk hoặc redux-saga để quản trị mọi async action. Vậy vì sao các bạn lại đc khuim đề xuất sử dụng redux-saga ?

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

Contrary Khủng redux thunk, you don’t end up in callbachồng hell, you can test your asynchronous flows easily cùng your actions stay pure.

Xem thêm: Cách Chơi Hoa Lan Từ Az Cho Người Mới Bắt Đầu, Cách Trồng Hoa Lan Từ Az Cho Người Mới Bắt Đầu

Tạm dịch: trái cùng với redux thunk, bạn không cần phải phân phát dồ lên với phần đông callbachồng trong những action, mang lại với saga đi, bạn có thể test hầu hết async action với cùng một quá trình thuận lợi nhưng mà không làm lỗi đông đảo action kia


*

So sánh 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)); ) ;;Ở phía trên ta đựng một action creator getDataFromAPI() khởi đầu async progress nlỗi sau:

Thứ nhất phun ra action được phxay store biết rằng sẵn sàng 1 API request ( dispatch(getDataStarted())Tiếp theo xúc tiến API request trả về một PromiseCuối thuộc bắn ra success action ví như request thành công xuất sắc hoặc error action ví như tất cả 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, nhưng mà phương thức implement không giống nhau toàn vẹn.

put cố gắng cho dispatchfunction cuối (apiSaga()) cứu vớt quan sát và theo dõi toàn diện và tổng thể toàn bộ đa số action (tại chỗ này gồm API_BUTTON_CLICK)Với phương pháp hotline của redux-saga, những bạn có thể get data trường đoản cú bất kỳ async function như thế nào (promise, …)Review

Cả 2 phương thức implement hầu như đọc dễ, mặc dù vậy đối với redux-thunk , bạn phải tuyên chiến đối đầu và cạnh tranh cùng đối đầu và cạnh tranh với cùng một tá rất nhiều promise, đều callbachồng ví như gồm, hết sức mất thời hạn cho người maintain phát âm and tìm kiếm code. Với redux-saga , đơn giản các bạn chỉ cần trachồng theo try/catch bloông xã nhằm theo dõi và quan sát cái code, tiếp giáp mặt này còn lâu dài hàm cứu vớt chúng ta track phần đa action một phương pháp dễ dàng.

Kết luận

Tại nội dung bài viết này bản thân đề cùa tới 2 điểm khác biệt bao gồm của redux-saga là duy trì mang lại action pure synchronos theo chuẩn chỉnh redux and sa thải hoàn toản callbachồng theo javascript cổ xưa. Bài viết tiếp theo sau bản thân sẽ nhắc nốt key point cuối cùng của saga là easy béo test.

Thể Loại: Chia sẻ trình bày Kiến Thức Cộng Đồng
Bài Viết: Saga Là Gì – Nghĩa Của Từ Saga

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *