Tổng Hợp

Giới thiệu về redux saga

Posted on by Hoài Thương

Redux-Saga là gì?

Redux-Saga là 1 thư viện redux middleware, giúp quản lý những facet impact trong ứng dụng redux trở nên đơn giản hơn. Bằng việc dùng cao nhất} tính năng Turbines (operate*) của ES6, nó cho phép ta viết async code nhìn giống như là synchronos.

Saga ko chỉ tồn tại trong thế giới javascript, nó còn được coi là 1 sample. Bạn có thể xem qua về saga sample bằng clip này: sentayho.com.vn/xDuwrtwYHu8

1 bí quyết nhìn nhanh chóng thì Saga sample là bí quyết để quản lý những lengthy transaction sở hữu những facet impact hoặc những nguy cơ tiềm ẩn. Sở hữu từng transaction thành công, chúng ta đều cần có counter-transaction để revert transaction đấy về trạng thái ban đầu giả dụ gặp trục trặc. Tham khảo thêm về saga sample sở hữu bài viết của Roman Liutikov : Confusion about Saga sample

Facet impact là gì??

Ta đã biết toàn bộ những xử lý trên REDUCER đều bắt buộc là synchronous và pure tức chỉ là xử lý đồng bộ. Nhưng trong ứng dụng thực tế thì cần nhiều hơn vậy thí dụ như asynchronous (thực hành 1 số việc như gọi 1 hàm AJAX để fetch dữ liệu về nhưng cần đợi kết quả chứ kết quả ko trả về ngay được) hoặc là impure (thực hành lưu, đọc dữ liệu ra bên bên cạnh như lưu dữ liệu ra ổ cứng hay đọc cookie từ trình thông qua… đều cần đợi kết quả). Những việc như thế trong lập trình hàm gọi nó là uncomfortable side effects.

Xem Thêm  Ko có chi tiếng Trung | Mẫu câu đáp lại lời Cảm ơn và Xin lỗi

Generator operate là gì??

Khác sở hữu operate bình thường là thực thi và trả về kết quả, thì Generator operate có thể thực thi, tạm giới hạn trả về kết quả và thực thi bằng tiếp. Từ khóa để khiến được việc đấy là “YIELD”. Generator được đưa ra bí quyết đây mấy chục 5 nhưng tới ES2015 new được bổ sung, những ngôn ngữ khác đã được bổ sung tính năng này như C#, PHP, Ruby, C++, R…

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

Đối sở hữu logic của saga, ta phân phối 1 hàm cho saga, chính hàm này là hàm đứng ra xem xét những motion trước lúc vào retailer, giả dụ là motion lưu ý thì nó sẽ thực thi hàm sẽ được thực thi, giả dụ bạn biết khái niệm hook thì hàm phân phối cho saga chính là hàm hook. Điều đặc biệt của hàm hook này nó là 1 generator operate, trong generator operate này có yield và từng lúc yield ta sẽ trả về 1 plain object. Object trả về đấy được gọi Impact object. impact object này đơn giản chỉ là 1 object bình thường nhưng chứa thông tin đặc biệt dùng để chỉ dẫn middleware của Redux thực thi những hoạt động khác thí dụ như gọi 1 hàm async khác hay put 1 motion tới retailer. Để tạo ra impact object đề cập trên trên thì ta gọi hàm từ thư viện của saga là redux-saga/results.

😛

Tại sao tôi bắt buộc dùng Saga??

Lúc khởi đầu tìm tòi về redux, bạn hay tìm thấy những bài chỉ dẫn dùng redux-thunk hoặc redux-saga để quản lý những async motion. Vậy tại sao bạn lại được khuyên dùng redux-saga ?

Xem Thêm  Lăng mộ là gì? Tìm hiểu ý nghĩa và nét đẹp văn hóa của lăng mộ

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

Opposite lớn redux thunk, you don’t find yourself in callback hell, you may take a look at your asynchronous flows simply and your actions keep pure. Tạm dịch: trái sở hữu redux thunk, bạn ko cần bắt buộc phát dồ lên sở hữu những callback trong từng motion, tới sở hữu saga đi, bạn có thể take a look at những async motion sở hữu 1 quy trình dễ dàng mà ko khiến hư những motion đấy Giới thiệu về redux saga

So sánh saga và thunk:

  1. redux-thunk

    import { API_BUTTON_CLICK, API_BUTTON_CLICK_SUCCESS, API_BUTTON_CLICK_ERROR, } from ‘./actions/consts’; import { getDataFromAPI } from ‘./api’; const getDataStarted = () => ({ kind: API_BUTTON_CLICK }); const getDataSuccess = knowledge => ({ kind: API_BUTTON_CLICK_SUCCESS, payload: knowledge }) const getDataError = message => ({ kind: API_BUTTON_CLICK_ERROR. payload: message }); const getDataFromAPI = () => { return dispatch => { dispatch(getDataStarted()); getDataFromAPI() .then(knowledge => { dispatch(getUserSuccess(knowledge)); }).fail(err => { dispatch(getDataError(err.message)); }) }; };

    Trên đây ta có 1 motion creator getDataFromAPI() khởi đầu async progress như sau:

    • Trước tiên bắn ra motion cho phép retailer biết rằng chuẩn bị 1 API request ( dispatch(getDataStarted())
    • Tiếp theo thực hành API request trả về 1 Promise
    • Cuối cùng bắn ra success motion giả dụ request thành công hoặc error motion giả dụ có lỗi

  2. redux-saga

    import { name, put, takeEvery } from ‘redux-saga/results’; import { API_BUTTON_CLICK, API_BUTTON_CLICK_SUCCESS, API_BUTTON_CLICK_ERROR, } from ‘./actions/consts’; import { getDataFromAPI } from ‘./api’; export operate* apiSideEffect(motion) { strive { const knowledge = yield name(getDataFromAPI); yield put({ kind: API_BUTTON_CLICK_SUCCESS, payload: knowledge }); } catch (e) { yield put({ kind: API_BUTTON_CLICK_ERROR, payload: e.message }); } } // the ‘watcher’ – on each ‘API_BUTTON_CLICK’ motion, run our facet impact export operate* apiSaga() { yield takeEvery(API_BUTTON_CLICK, apiSideEffect); }

    Cùng 1 course of, nhưng bí quyết implement khác nhau hoàn toàn.

    • put thay đổi cho dispatch
    • operate cuối (apiSaga()) giúp theo dõi tổng thể toàn bộ những motion (trên đây có API_BUTTON_CLICK)
    • Sở hữu bí quyết gọi của redux-saga, chúng ta có thể get knowledge từ bất kì async operate nào (promise, …)
  3. Nhận xét

    Cả 2 bí quyết implement đều dễ đọc, tuy nhiên đối sở hữu redux-thunk , bạn bắt buộc đối đầu sở hữu 1 tá những promise, những callback giả dụ có, siêu mất thời kì cho người keep đọc và tìm code. Sở hữu redux-saga , đơn giản bạn chỉ cần observe theo strive/catch block để theo dõi dòng code, ngoài đấy còn có hàm giúp bạn observe những motion 1 bí quyết dễ dàng.

Xem Thêm  Hình tròn là gì? Khái niệm đường tròn Bí quyết tính diện tích

Kết luận

Trên bài viết này mình đề cập tới 2 điểm nhấn chính của redux-saga là giữ cho motion pure synchronos theo chuẩn redux và loại bỏ hoàn toàn callback theo javascript cổ điển. Bài viết tiếp theo mình sẽ đề cập nốt key level cuối cùng của saga là simple lớn take a look at.

Hoài Thương