click

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

Saga La Gi Nghia Cua Tu Saga

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
quản trị những side effect trong ứng dụng redux trở nên đơn giản và giản dị, hơn. Bằng việc,
Cần sử dụng, tối nhiều
hiệu quả, Generators (function*) của ES6, nó được chấp nhận, ta viết async code nhìn
tựa như, là synchronos.

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

Saga không riêng gì, là tồn tại, trong toàn cầu javascript, nó còn
Được xem là, một pattern. Bạn cũng xuất hiện, thể nhìn qua về saga pattern bằng clip này: https://youtu.be/xDuwrtwYHu8

Một
phương pháp nhìn nhanh gọn, lẹ thì Saga pattern là
phương pháp để
quản trị những long transaction với những side effect hoặc những tiềm ẩn nguy cơ tiềm ẩn, chứa đựng. Với mỗi transaction thắng lợi,
tất cả chúng ta, thường rất, sẽ phải, có counter-transaction để revert transaction đó về trạng thái lúc đầu nếu gặp trục trặc.
Xem 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 và xử lý, ở REDUCER đều phải là synchronous and pure tức chỉ là giải quyết và xử lý, tương đồng,. Nhưng trong ứng dụng trong thực tiễn thì nên
nhiều hơn thế nữa nữa vậy
ví dụ điển hình như asynchronous (tiến hành khởi 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 (tiến hành khởi công, lưu, đọc tài liệu ra
Phía 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ư vậy, trong lập trình hàm gọi nó là side effects.

Xem Ngay:  Ale Là Gì - Các Loại Bia Thủ Công Pale Ale Tiêu Biểu

Generator function là gì??

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

Redux-Saga vận động, ra làm sao,??

Nếu như với xúc tích của saga, ta cung ứng, một hàm cho saga, chính hàm đó đó là hàm đứng ra
Để ý đến những action trước lúc vào store, nếu là action
chăm sóc, thì nó sẽ ảnh hưởng, triển khai, hàm sẽ được triển khai,, nếu như bạn biết khái niệm hook thì hàm cung ứng, cho saga đó
đó chính là hàm hook.Điều nổi trội, của hàm hook này nó là một trong generator function, trong generator function này
còn tồn tại, yield and mỗi một khi yield ta sẽ trả về một plain object. Object trả về này được, gọi Effect object. effect object này đơn giản và giản dị, chỉ là một trong object đôi chút nhưng chứa thông báo nổi trội, sử dụng để
hướng dẫn middleware của Redux triển khai, những vận động, khác
ví dụ điển hình như gọi một hàm async khác hay put một action tới store. Để 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
Cần sử dụng, Saga??

Xem Ngay:  Sự Khác Nhau Giữa Git Fetch Và Git Pull, Khác Biệt Giữa Git Fetch Và Git Pull

Khi bước đầu tiên, tìm tòi về redux, bạn hay tìm cảm nhận thấy, thêm những bài hướng dẫn
Cần sử dụng, redux-thunk hoặc redux-saga để
quản trị những async action. Vậy tại sao bạn lại được khuyên
Cần sử 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 những, callback trong những action, tới, với saga đi, bạn cũng xuất hiện, thể test những async action với cùng 1
quy trình tiến độ đơn giản và dễ dàng, mà không, làm hư những action đó

*

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)); }) };};Tại đây ta có một action creator getDataFromAPI() bước đầu tiên, async progress như sau:


Trước tiên, bắn ra action được chấp nhận, store biết rằng sẵn sàng chuẩn bị, 1 API request ( dispatch(getDataStarted())Tiếp sau tiến hành khởi 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
phương pháp implement
khác hoàn toàn trọn vẹn,.

Xem Ngay:  Mine Là Gì - Phân Biệt Cách Dùng Mine, My

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ể những action (tại đây có API_BUTTON_CLICK)Với
phương pháp gọi của redux-saga, những
chúng ta cũng có thể, get data từ bất kể async function nào (promise, …)Đánh Giá

Cả hai
phương pháp implement đều dễ đọc,
tuy nhiên
So với, redux-thunk , bạn rất sẽ phải, tuyên chiến đối đầu và cạnh tranh và đối đầu, và tuyên chiến và cạnh tranh và đối đầu, với cùng 1 tá những promise, những callback nếu có, rất mất thời hạn, cho
những người dân, maintain đọc and tìm code. Với redux-saga , đơn giản và giản dị, bạn chỉ việc track theo try/catch block để theo dõi dòng code, cạnh bên này còn tồn tại, hàm giúp cho bạn, track những action một
phương pháp đơn giản và 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 tới, 2 điểm độc lạ, và
khác hoàn toàn chính của redux-saga là giữ cho action pure synchronos theo chuẩn redux and loại bỏ, trọn vẹn, callback theo javascript truyền thống cổ truyền,. 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: San sẻ, giải 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

Leave a Reply

Your email address will not be published. Required fields are marked *