Redux saga là gì

Bạn đang xem:

Để hiểu redux-saga là gì thì tiên phong ta cần biết về khái niệm middleware. Vậy middleware là gì ? Ngay từ cái tên ta đã đoán được middleware là trung gian, mà ở đây chính là một lớp trung gian nằm giữa Dispatch Action và Reducers. Nó sẽ được gọi trước khi một action được dispatch. Để hiểu rõ hơn ta hoàn toàn có thể nhìn vào hình ảnh sau đây. Bạn đang xem : Redux saga là gìTại đây middleware nằm giữa action và reducers, và nó triển khai gọi đến API. Vậy ta hoàn toàn có thể tưởng tượng rằng middleware giống như một gián điệp trung gian trà trộn vào một tổ chức triển khai, trách nhiệm của người gián điệp này là ngồi đợi tên trùm giao trách nhiệm ( action ) cho đàn em của hắn ( reducers ), thực thi một phi vụ buôn mai thúy sang đông Lào. Lúc này người gián điệp đánh điện báo cho cấp trên ( gọi API ) để thực thi vây bắt. Thế là tác dụng của phi vụ này bị đổi khác. Tên trùm bị ngồi tù, đàn em thì giải tán .

Side Effect:

Redux saga là gì

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

Side Effect thì ta có thể hiểu đơn giản là một action nào đó thực hiên một công việc tốn thời gian mà ta không định lượng được hoặc ta không care được, thí dụ: Đọc dữ liệu từ ổ cứng, gọi API lấy dữ liệu,….Side Effect thì ta hoàn toàn có thể hiểu đơn thuần là một action nào đó thực hiên một việc làm tốn thời hạn mà ta không định lượng được hoặc ta không care được, thí dụ : Đọc dữ liệu từ ổ cứng, gọi API lấy tài liệu, ….Generator function :Để hiểu được sự hoạt động của redux saga bạn cần hiểu một số khái niệm cơ bản như generator function. Generator function là function có khả năng hoãn lại quá trình thực thi mà vẫn giữ nguyên được context.Khác với function bình thường là thực thi và trả về kết quả, thì Generator function có thể thực thi, tạm dừng trả về kết quả và thực thi bằng tiếp. Từ khóa để làm được việc đấy là “YIELD”.Nói một cách đơn giản thì generator function là 1 function có khả năng tạm ngưng trước khi hàm kết thúc (khác với pure function khi được gọi sẽ thực thi hết các câu lệnh trong hàm), và có thể tiếp tục chạy tại một thời điểm khác. Chính chức năng mới này giúp ta giải quyết được việc bất đồng bộ, hàm sẽ dừng và đợi async chạy xong rồi tiếp tục thực thi.

Để hiểu được sự hoạt động giải trí của redux saga bạn cần hiểu 1 số ít khái niệm cơ bản như generator function. Generator function là function có năng lực hoãn lại quy trình thực thi mà vẫn giữ nguyên được context. Khác với function thông thường là thực thi và trả về hiệu quả, thì Generator function hoàn toàn có thể thực thi, tạm dừng trả về hiệu quả và thực thi bằng tiếp. Từ khóa để làm được việc đấy là “ YIELD ”. Nói một cách đơn thuần thì generator function là 1 function có năng lực tạm ngưng trước khi hàm kết thúc ( khác với pure function khi được gọi sẽ thực thi hết các câu lệnh trong hàm ), và hoàn toàn có thể liên tục chạy tại một thời gian khác. Chính công dụng mới này giúp ta xử lý được việc bất đồng bộ, hàm sẽ dừng và đợi async chạy xong rồi liên tục thực thi. Xem thêm : Tandem Là Gì – Tandem Có Nghĩa Là GìRedux-Saga :Khái niệm: Từ các ý trên ta có thể tóm gọn Redux-Saga là một thư viện redux middleware, giúp quản lý các side effect trong ứng dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối đa tính năng Generators (function*) của ES6, nó cho phép ta viết async code nhìn giống như là synchronos.Khái niệm : Từ các ý trên ta hoàn toàn có thể tóm gọn Redux-Saga là một thư viện redux middleware, giúp quản trị các side effect trong ứng dụng redux trở nên đơn thuần hơn. Bằng việc sử dụng tối đa tính năng Generators ( function * ) của ES6, nó được cho phép ta viết async code nhìn giống như là synchronos .

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

Đối với logic của saga, ta phân phối một hàm cho saga, chính hàm này là hàm đứng ra xem xét các action trước khi vào store, nếu là action chăm sóc thì nó sẽ thực thi hàm sẽ được thực thi. Một function trong saga là một generator function có dạng function * simpleSagaFunction ( ) { yield console.log ( ” hello world ” ) ; } ở đây mình tạm gọi đây là một saga function. Qua ví dụ ở trên bạn có thấy một đặc thù mê hoặc của redux-saga mang lại. Đúng vậy chính là nó yield, đây là một helper vô cùng có ích. Bởi vì khi ta cần một thao tác nào đó tốn thời hạn thì việc đồng điệu luồng hoạt động giải trí là vô cùng thiết yếu, yield giúp ta ta giải quyết và xử lý yếu tố đó. Thực chất ở đây, yield sẽ cho dừng không chạy đoạn lệnh tiếp theo cho đến khi next ( ) được gọi. Một số helper trong redux saga : takeEvery ( ) : thực thi và trả lại hiệu quả của mọi actions được gọi. takeLastest ( ) : có nghĩa là nếu tất cả chúng ta triển khai một loạt các actions, nó sẽ chỉ thực thi và trả lại hiệu quả của của actions ở đầu cuối. take ( ) : tạm dừng cho đến khi nhận được action.put ( ) : dispatch một action.call ( ) : gọi function. Nếu nó return về một promise, tạm dừng saga cho đến khi promise được xử lý. race ( ) : chạy nhiều effect đồng thời, sau đó hủy toàn bộ nếu một trong số đó kết thúc. Xem thêm : ‎ rise Of Kingdoms : Lost Crusade Trên App Store, ‎ rise Of Kingdoms : Lost Crusade Trên App Store

III. Hướng dẫn cài đặt và sử dụng Redux-Saga

Hữu ích như vậy nhưng làm thế nào để ta có thế áp dụng saga vào project của chúng ta?Hữu ích như vậy nhưng làm thế nào để ta có thế vận dụng saga vào project của tất cả chúng ta ?Đầu tiên ta cần install redux-saga vào trong project : USD npm install — save redux-sagaor USD yarn add redux-saga

Cấu hình lại store để thêm middleware vào giữa luồng đi của action và reducer

import { createStore, applyMiddleware } from ” redux ” import createSagaMiddleware from ” redux-saga ” import reducer from “. / reducers ” import mySaga from “. / sagas ” / / create the saga middleware const sagaMiddleware = createSagaMiddleware ( ) / / mount it on the Store const store = createStore ( reducer, applyMiddleware ( sagaMiddleware ) ) / / then run the saga sagaMiddleware. run ( mySaga ) / / render the applicationTạo file mySaga đã được import ở trên :

import { call, put, takeEvery, takeLatest } from “redux-saga/effects” import Api from “…” // worker Saga: will be fired on USER_FETCH_REQUESTED actions function* fetchUser(action) { try { const user = yield call(Api.fetchUser, action.payload.userId); yield put({type: “USER_FETCH_SUCCEEDED”, user: user}); } catch (e) { yield put({type: “USER_FETCH_FAILED”, message: e.message}); } } /* Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action. Allows concurrent fetches of user. */ function* mySaga() { yield takeEvery(“USER_FETCH_REQUESTED”, fetchUser); } /* Alternatively you may use takeLatest. Does not allow concurrent fetches of user. If “USER_FETCH_REQUESTED” gets dispatched while a fetch is already pending, that pending fetch is cancelled and only the latest one will be run. */ function* mySaga() { yield takeLatest(“USER_FETCH_REQUESTED”, fetchUser); } export default mySaga;IV. Kết luận

Ở bài viết này mình tập trung giải thích một số khái niệm để các bạn hình dung được saga nó là cái gì. Nó hoạt động ra làm sao.

Chuyên mục: Ở bài viết này mình tập trung chuyên sâu lý giải một số ít khái niệm để các bạn tưởng tượng được saga nó là cái gì. Nó hoạt động giải trí ra làm thế nào. Chuyên mục : Hỏi Đáp