React, Redux, Redux Saga, Redux Saga Là Gì Chú Thích Saga Là Gì

Redux-Saga là gì?

Redux-Saga là một tlỗi viện redux middleware, góp cai quản hầu hết side effect trong vận dụng redux trlàm việc yêu cầu đơn giản dễ dàng hơn. Bằng câu hỏi sử dụng tối nhiều tính năng Generators (function*) của ES6, nó cho phép ta viết async code nhìn y như là synchronos.quý khách đang xem: Saga là gì

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

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

Generator function là gì??

Khác với function thông thường là thực hiện với trả về hiệu quả, thì Generator function hoàn toàn có thể tiến hành, tạm dừng trả về tác dụng cùng tiến hành bằng tiếp. Từ khóa để gia công được bài toán đó là “YIELD”. Generator được chỉ dẫn từ thời điểm cách đó mấy chục năm tuy nhiên mang lại ES2015 bắt đầu được bổ sung cập nhật, những ngôn ngữ khác đã được bổ sung tuấn kiệt nàgiống hệt như C#, PHP.., Ruby, C++, R…

Redux-Saga chuyển động như thế nào??


Bạn đang xem: React, redux, redux saga, redux saga là gì chú thích saga là gì

*

Xem thêm: Bảng Ngọc Điêu Thuyền Liên Quân Mobile, Cách Chơi Điêu Thuyền Mùa 16

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

lúc bước đầu tìm kiếm tòi về redux, bạn hay search thấy những bài bác chỉ dẫn thực hiện redux-thunk hoặc redux-saga nhằm làm chủ những async action. Vậy tại vì sao chúng ta lại được khuyên ổn thực hiện redux-saga ?

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


*

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 phía trên ta bao gồm một action creator getDataFromAPI() bước đầu async progress nhỏng sau:

Trước tiên phun ra action có thể chấp nhận được store hiểu được sẵn sàng 1 API request ( dispatch(getDataStarted())Tiếp theo triển khai API request trả về một PromiseCuối thuộc phun ra success action trường hợp request thành công hoặc error action trường hợp tất 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, tuy nhiên biện pháp implement khác biệt hoàn toàn.

put cầm cho dispatchfunction cuối (apiSaga()) giúp theo dõi và quan sát toàn diện toàn thể những action (ở đây bao gồm API_BUTTON_CLICK)Với bí quyết hotline của redux-saga, bạn có thể get data tự bất cứ async function làm sao (promise, ...)Nhận xétKết luận

Tại nội dung bài viết này bản thân đề cập đến 2 điểm nhấn thiết yếu của redux-saga là giữ cho action pure synchronos theo chuẩn chỉnh redux với thải trừ trọn vẹn callbachồng theo javascript truyền thống cuội nguồn. 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 to test.

Leave a Reply

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