Redux 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ý đầy đủ side effect vào vận dụng redux trnghỉ ngơi buộc phải đơn giản rộng. Bằng câu hỏi sử dụng buổi tối đa thiên tài Generators (function*) của ES6, nó cho phép ta viết async code quan sát y 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 coi là 1 pattern. quý khách hàng hoàn toàn có thể nhìn qua về saga pattern bằng clip này: https://youtu.be/xDuwrtwYHu8

Một ý kiến nhanh lẹ thì Saga pattern là cách để thống trị những long transaction cùng với gần như side effect hoặc những nguy cơ tiềm ẩn tàng ẩn. Với từng transaction thành công, họ đều cần phải có counter-transaction nhằm revert transaction đó về tâm trạng lúc đầu giả dụ chạm chán trục trệu. Tsi mê khảo thêm về saga pattern với bài viết của Roman Liutikov : Confusion about Saga pattern

Side effect là gì??

Ta đã biết tất cả gần như xử lý làm việc REDUCER phần nhiều buộc phải là synchronous với pure tức chỉ nên cách xử lý đồng bộ. Nhưng trong áp dụng thực tế thì nên nhiều hơn thế vậy ví dụ như asynchronous (thực hiện một vài bài toán như gọi một hàm AJAX để fetch dữ liệu về tuy nhiên buộc phải đợi kết quả chứ kết quả không trả về ngay lập tức được) Hoặc là impure (tiến hành lưu lại, hiểu tài liệu ra bên phía ngoài nlỗi lưu lại tài liệu ra ổ cứng tốt gọi cookie từ trình duyệt… số đông phải đợi kết quả). Những câu hỏi 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à tiến hành với trả về tác dụng, thì Generator function rất có thể triển khai, tạm ngưng trả về công dụng cùng tiến hành bằng tiếp. Từ khóa để làm được bài toán đấy là “YIELD”. Generator được chỉ dẫn cách đây mấy chục năm tuy nhiên cho ES2015 bắt đầu được bổ sung cập nhật, những ngôn từ khác đã được bổ sung khả năng này hệt như C#, PHPhường, Ruby, C++, R…

Redux-Saga vận động như thế nào??

Đối với xúc tích của saga, ta cung ứng một hàm cho saga, chính hàm này là hàm đứng ra để mắt tới những action trước lúc vào store, giả dụ là action quyên tâm thì nó vẫn triển khai hàm sẽ được thực hiện, nếu bạn biết khái niệm hook thì hàm hỗ trợ đến saga đó là hàm hook.Điều đặc trưng của hàm hook này nó là 1 generator function, trong generator function này có yield với mỗi một khi yield ta vẫn trả về một plain object. Object trả về này được Hotline Effect object. effect object này đơn giản chỉ là 1 trong những object thông thường cơ mà chứa ban bố đặc biệt dùng làm hướng dẫn middleware của Redux thực hiện các chuyển động không giống ví như Call một hàm async không giống hay put một action tới store. Để tạo nên effect object kể ở trên thì ta Call hàm từ bỏ thư viện của saga là redux-saga/effects.

*

Tại sao tôi đề nghị thực hiện Saga??

Khi bắt đầu tìm tòi về redux, bạn giỏi search thấy những bài xích chỉ dẫn thực hiện redux-thunk hoặc redux-saga để quản lý những async action. Vậy tại sao các bạn lại được khuim thực hiện redux-saga ?

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

Contrary to lớn redux thunk, you don’t end up in callbachồng hell, you can test your asynchronous flows easily và your actions stay pure.

Xem thêm: Cách Lập Thuyết Minh Báo Cáo Tài Chính Theo Thông Tư 133 Mới Nhất

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 callbaông xã trong những action, mang lại cùng với saga đi, bạn cũng có thể chạy thử các async action với 1 quy trình thuận tiện mà không có tác dụng hỏng các 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)); ) ;;Ở phía trên ta tất cả một action creator getDataFromAPI() ban đầu async progress nlỗi sau:

trước hết phun ra action được cho phép store biết rằng chuẩn bị 1 API request ( dispatch(getDataStarted())Tiếp theo tiến hành API request trả về một PromiseCuối cùng bắn ra success action ví như request thành công hoặc error action nếu có lỗi

redux-saga

import điện thoại tư vấn, 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, dẫu vậy bí quyết implement khác nhau trọn vẹn.

put cầm mang lại dispatchfunction cuối (apiSaga()) giúp theo dõi toàn diện và tổng thể toàn thể các action (ở đây gồm API_BUTTON_CLICK)Với phương pháp Call 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 phương pháp implement số đông dễ đọc, tuy vậy so với redux-thunk , các bạn đề xuất đối đầu với một tá các promise, những callbaông chồng trường hợp bao gồm, rất rất lâu cho những người maintain đọc với 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 blochồng để quan sát và theo dõi loại code, ngoài ra còn tồn tại hàm giúp cho bạn trachồng các action một phương pháp thuận tiện.

Kết luận

Ở nội dung bài viết này bản thân đề cập tới 2 điểm nổi bật thiết yếu của redux-saga là giữ đến action pure synchronos theo chuẩn redux cùng thải trừ hoàn toàn callbaông xã theo javascript truyền thống lịch sử. Bài viết tiếp theo sau mình đã kể nốt key point ở đầu cuối của saga là easy to test.