Redux Saga Là Gì

Redux-Saga là gì?

Redux-Saga là 1 trong những thư viện redux middleware, góp làm chủ gần như side effect vào ứng dụng redux trsinh hoạt đề xuất đơn giản và dễ dàng hơn. Bằng vấn đề áp dụng về tối nhiều thiên tài Generators (function*) của ES6, nó cho phép ta viết async code nhìn hệt như là synchronos.

Bạn đang xem: Redux saga là gì

Saga không chỉ là sống thọ trong trái đất javascript, nó còn được xem là 1 pattern. Quý Khách có thể xem qua về saga pattern bởi clip này: https://youtu.be/xDuwrtwYHu8

Một cách nhìn lập cập thì Saga pattern là cách để làm chủ phần đông long transaction cùng với đa số side effect hoặc những nguy hại tiềm ẩn. Với từng transaction thành công, bọn họ đông đảo cần phải có counter-transaction để revert transaction kia về tâm trạng lúc đầu giả dụ gặp trục trệu. Tsay đắm khảo 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 sẽ biết toàn bộ rất nhiều cách xử trí làm việc REDUCER phần đa phải là synchronous cùng pure tức chỉ cần giải pháp xử lý đồng hóa. Nhưng vào áp dụng thực tế thì nên cần nhiều hơn thế nữa vậy ví dụ như asynchronous (tiến hành một vài Việc như Điện thoại tư vấn một hàm AJAX để fetch dữ liệu về tuy vậy bắt buộc ngóng hiệu quả chđọng hiệu quả ko trả về ngay được) Hay là impure (triển khai lưu, gọi tài liệu ra bên phía ngoài nlỗi lưu giữ tài liệu ra ổ cứng giỏi phát âm cookie từ bỏ trình duyệt… đông đảo cần ngóng kết quả). Những việc như vậy vào xây dựng hàm hotline nó là side effects.

Generator function là gì??

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

Redux-Saga hoạt động như thế nào??

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

*

Tại sao tôi phải thực hiện Saga??

khi bắt đầu kiếm tìm tòi về redux, các bạn giỏi tìm thấy các bài bác trả lời sử dụng redux-thunk hoặc redux-saga nhằm cai quản những async action. Vậy tại sao bạn lại được khuyên ổn thực hiện redux-saga ?

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

Contrary to redux thunk, you don’t kết thúc up in callbachồng hell, you can test your asynchronous flows easily & your actions stay pure.

Xem thêm: Phong Cách Thời Trang Artsy Là Gì ? Artsy Fartsy Nghĩa Là Gì

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 callbachồng trong những action, cho với saga đi, bạn cũng có thể kiểm tra các async action với cùng 1 quy trình dễ dàng mà lại không có tác dụng lỗi những action kia
*

So sánh saga và 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 tất cả một action creator getDataFromAPI() bước đầu async progress nhỏng sau:

Trước tiên bắn ra action chất nhận được store hiểu được sẵn sàng 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 giả dụ request thành công hoặc error action trường hợp 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, mà lại biện pháp implement khác biệt hoàn toàn.

put vắt mang lại dispatchfunction cuối (apiSaga()) góp theo dõi và quan sát tổng thể tổng thể các action (tại chỗ này có API_BUTTON_CLICK)Với bí quyết Call của redux-saga, bạn có thể get data trường đoản cú bất kể async function nào (promise, ...)Nhận xét

Cả 2 phương pháp implement đông đảo dễ đọc, tuy vậy đối với redux-thunk , bạn yêu cầu tuyên chiến và cạnh tranh với 1 tá những promise, những callbaông chồng nếu có, rất lâu cho những người maintain đọc và tìm code. Với redux-saga , đơn giản các bạn chỉ việc traông chồng theo try/catch blochồng nhằm quan sát và theo dõi mẫu code, bên cạnh đó còn tồn tại hàm khiến cho bạn traông xã các action một biện pháp thuận lợi.

Kết luận

Tại bài viết này bản thân đề cùa đến 2 điểm nhấn chủ yếu của redux-saga là giữ lại cho action pure synchronos theo chuẩn redux với loại bỏ hoàn toàn callbachồng theo javascript truyền thống. Bài viết tiếp theo sau mình vẫn đề cập nốt key point cuối cùng của saga là easy to lớn test.