REDUX SAGA LÀ GÌ

  -  

Để gọi redux-saga là gì thì trước tiên ta cần biết về khái niệm middleware.Vậy middleware là gì?Ngay từ bỏ cái tên ta đang đân oán được middleware là trung gian, nhưng mà ở chỗ này chính là một lớp trung gian nằm trong lòng Dispatch Action cùng Reducers. Nó sẽ tiến hành Điện thoại tư vấn trước lúc một action được dispatch.Để nắm rõ rộng ta rất có thể chú ý vào hình hình ảnh sau đây.

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


*

Tại đây middleware nằm trong lòng action và reducers, cùng nó tiến hành Gọi cho API. Vậy ta hoàn toàn có thể tưởng tượng rằng middleware y như một con gián điệp trung gian tkiểm tra trộn vào một tổ chức triển khai, trách nhiệm của bạn loại gián điệp này là ngồi đợi tên quấn giao trách nhiệm (action) mang đến bầy em của hắn(reducers), thực hiện một phi vụ buôn mai thúy sang đông Lào. Trong thời điểm này tín đồ gián điệp tấn công năng lượng điện báo mang lại cấp cho trên ( Gọi API) để thực hiện vây bắt. Thế là công dụng của phi vụ này bị đổi khác. Tên quấn bị ngồi tù nhân, bầy em thì giải tán.

Side Effect:

Side Effect thì ta rất có thể hiểu đơn giản dễ dàng là một trong những action như thế nào đó thực hiên một công việc tốn thời gian nhưng mà ta không định lượng được hoặc ta không care được, thí dụ: Đọc tài liệu tự ổ cứng, điện thoại tư vấn API đem tài liệu,….

Xem thêm: Game Bắn Súng 6 Nòng - Súng Máy “6 Nòng” Trong Tập Kích Có Gì Đáng Sợ

Generator function:

Để đọc được sự buổi giao lưu của redux saga bạn phải hiểu một số trong những khái niệm cơ bạn dạng như generator function. Generator function là function có chức năng hoãn lại quá trình triển khai cơ mà vẫn không thay đổi được context.Khác cùng với function bình thường là thực hiện với trả về hiệu quả, thì Generator function rất có thể tiến hành, tạm dừng trả về kết quả và thực hiện bởi tiếp. Từ khóa để triển khai được việc đó là “YIELD”.Nói một bí quyết đơn giản thì generator function là một trong những function có tác dụng tạm ngưng trước lúc hàm kết thúc (không giống cùng với pure function khi được Call vẫn xúc tiến hết những câu lệnh trong hàm), cùng có thể liên tiếp chạy tại 1 thời điểm khác. Chính chức năng new này tạo điều kiện cho ta xử lý được câu hỏi bất đồng điệu, hàm đang dừng với đợi async chạy xong rồi thường xuyên thực hiện.

Redux-Saga:

Khái niệm: Từ các ý bên trên ta có thể tóm gọn Redux-Saga là một trong thư viện redux middleware, giúp làm chủ phần lớn side effect vào vận dụng redux trsinh hoạt phải đơn giản và dễ dàng hơn. Bằng bài toán sử dụng về tối nhiều thiên tài Generators (function*) của ES6, nó cho phép ta viết async code nhìn y hệt như là synchronos.

Xem thêm: ( Hướng Dẫn Up Rom Android Bằng Odin, Cách Up Rom Samsung Bằng Odin

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


*

Đối cùng với lô ghích của saga, ta cung ứng một hàm cho saga, thiết yếu hàm này là hàm đứng ra lưu ý những action trước khi vào store, nếu như là action quyên tâm thì nó đã thực thi hàm sẽ được xúc tiến.Một function vào saga là một trong generator function bao gồm dạng function* simpleSagaFunction() yield console.log(“hello world”); ở chỗ này mình tạm thời Điện thoại tư vấn đây là một saga function.Qua ví dụ sinh hoạt bên trên các bạn có thấy một Điểm sáng độc đáo của redux-saga mang về. Đúng vậy đó là nó yield, đấy là một helper khôn xiết bổ ích. Bởi bởi Khi ta bắt buộc một thao tác làm việc làm sao đó tốn thời hạn thì Việc đồng điệu luồng hoạt động là khôn cùng cần thiết, yield hỗ trợ chúng ta ta cách xử trí vấn đề này. Thực chất tại đây, yield vẫn cho giới hạn ko chạy đoạn lệnh tiếp theo sau cho đến Lúc next()được gọi.Một số helper vào redux saga:takeEvery() : thực hiện và trả lại tác dụng của phần đa actions được Hotline.takeLastest() : Tức là nếu bọn họ thực hiện một loạt các actions, nó đã chỉ triển khai cùng trả lại kết quả của của actions cuối cùng.take() : tạm dừng cho đến Khi cảm nhận action.put() : dispatch một action.call(): Điện thoại tư vấn function. Nếu nó return về một promise, tạm ngưng saga cho tới khi promise được xử lý.race() : chạy những effect đồng thời, kế tiếp bỏ tất cả nếu như một trong số đó xong.

III. Hướng dẫn cài đặt với thực hiện Redux-Saga

Hữu ích những điều đó nhưng mà có tác dụng cố nào để ta bao gồm nắm vận dụng saga vào project của bọn chúng ta?

trước hết ta buộc phải install redux-saga vào vào project:$ npm install –save sầu redux-sagaor$ yarn add redux-saga

Cấu hình lại store để thêm middleware vào thân luồng đi của action cùng 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ó được import sống trên:

import điện thoại tư vấn, 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 takeLademo. 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 lachạy thử one will be run. */ function* mySaga() yield takeLatest(“USER_FETCH_REQUESTED”, fetchUser); export mặc định mySaga;IV. Kết luận

Ở bài viết này bản thân tập trung giải thích một trong những định nghĩa để các bạn hình dung được saga nó là đồ vật gi. Nó chuyển động như thế nào.


Categories Có Thể Quý khách hàng Chưa Biết Tags infinity saga là gì, react saga là gì, redux cơ bản, redux framework, redux là gì, saga dawa là gì, saga là gì, saga là dung dịch gì, saga tức là gì, saga pattern là gì Post navigation