Redux-Saga là gì?

Redux-Saga là 1 trong tlỗi viện redux middleware, góp thống trị đông đảo side effect vào vận dụng redux trở đề xuất đơn giản dễ dàng hơn. Bằng Việc thực hiện tối đa tác dụng Generators (function*) của ES6, nó được cho phép ta viết async code chú ý giống như là synchronos.

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

Saga không chỉ là sống thọ trong thế giới javascript, nó còn được coi là 1 pattern. Quý khách hàng rất có thể xem 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ị rất nhiều long transaction cùng với số đông side effect hoặc các nguy hại tiềm ẩn. Với mỗi transaction thành công xuất sắc, bọn họ phần đông cần có counter-transaction nhằm revert transaction kia về trạng thái lúc đầu nếu chạm mặt trục trặc. Tđam 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 toàn bộ gần như xử lý làm việc REDUCER phần nhiều đề xuất là synchronous cùng pure tức chỉ cần xử trí nhất quán. Nhưng vào áp dụng thực tế thì cần nhiều hơn thế vậy ví dụ như asynchronous (triển khai một số trong những Việc nlỗi Call một hàm AJAX nhằm fetch dữ liệu về dẫu vậy buộc phải hóng kết quả chứ tác dụng không trả về tức thì được) hay là impure (tiến hành lưu, gọi tài liệu ra bên ngoài như lưu giữ dữ liệu ra ổ cứng giỏi đọc cookie trường đoản cú trình duyệt… đầy đủ đề xuất chờ kết quả). Những vấn đề như thế trong thiết kế hàm Hotline nó là side effects.

Generator function là gì??

Khác với function bình thường là thực thi cùng trả về tác dụng, thì Generator function hoàn toàn có thể xúc tiến, tạm ngưng trả về hiệu quả với xúc tiến bởi tiếp. Từ khóa để triển khai được bài toán đó là “YIELD”. Generator được đưa ra cách đó mấy chục năm mà lại cho ESnăm ngoái bắt đầu được bổ sung, các ngữ điệu khác đã có được bổ sung tác dụng nàgiống như C#, PHP., Ruby, C++, R…

Redux-Saga hoạt động như vậy nào??

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

*

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

Khi ban đầu tra cứu tòi về redux, bạn hay tìm kiếm thấy các bài xích trả lời thực hiện redux-thunk hoặc redux-saga nhằm làm chủ các async action. Vậy vì sao bạn lại được khuyên sử dụng redux-saga ?

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

Contrary lớn redux thunk, you don’t end up in callback hell, you can chạy thử your asynchronous flows easily and your actions stay pure.

Xem thêm: Ca Sĩ Emma Là Ai, Sinh Năm Bao Nhiêu? Hot Girl Emma Lê

Tạm dịch: trái cùng với redux thunk, bạn không nhất thiết phải phát dồ lên cùng với các callback trong những action, mang đến cùng với saga đi, bạn có thể kiểm tra những async action với cùng 1 các bước dễ dãi cơ mà 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)); ) ;;Ở phía trên ta có một action creator getDataFromAPI() ban đầu async progress nlỗi sau:

Đầu tiên bắn ra action chất nhận được store hiểu được chuẩn bị 1 API request ( dispatch(getDataStarted())Tiếp theo tiến hành 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ư bao gồm 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 cách implement không giống nhau hoàn toàn.

put chũm đến dispatchfunction cuối (apiSaga()) góp theo dõi tổng thể và toàn diện cục bộ các action (ở chỗ này tất cả API_BUTTON_CLICK)Với biện pháp Gọi của redux-saga, bạn cũng có thể get data từ bỏ bất kì async function như thế nào (promise, ...)Nhận xét

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

Kết luận

Tại bài viết này bản thân đề cập tới 2 điểm nổi bật bao gồm của redux-saga là duy trì mang đến action pure synchronos theo chuẩn chỉnh redux với vứt bỏ trọn vẹn callbaông xã theo javascript truyền thống. Bài viết tiếp theo mình đã đề cập nốt key point ở đầu cuối của saga là easy lớn test.

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 *