Để phát âm redux-saga là gì thì trước tiên ta nên biết về có mang middleware.Vậy middleware là gì?Ngay tự cái thương hiệu ta sẽ đoán thù được middleware là trung gian, cơ mà ở chỗ này đó là một lớp trung gian nằm trong lòng Dispatch Action cùng Reducers. Nó sẽ tiến hành hotline trước lúc một action được dispatch.Để nắm rõ rộng ta hoàn toàn có thể quan sát vào hình hình ảnh tiếp sau đây.quý khách đã xem: Redux saga là gì


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

*

Tại trên đây middleware nằm trong lòng action cùng reducers, và nó triển khai hotline mang đến API. Vậy ta hoàn toàn có thể tưởng tượng rằng middleware y như một loại gián điệp trung gian tsoát trộn vào một trong những tổ chức triển khai, trọng trách của tín đồ loại gián điệp này là ngồi ngóng tên trùm giao trọng trách (action) mang đến bọn em của hắn(reducers), tiến hành một phi vụ buôn mai thúy lịch sự đông Lào. Lúc bấy giờ fan gián điệp đánh năng lượng điện báo đến cung cấp trên ( điện thoại tư vấn API) nhằm tiến hành vây bắt. Thế là kết quả của phi vụ này bị thay đổi. Tên quấn bị ngồi tội phạm, đàn em thì giải tán.

Side Effect:

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

Generator function:

Redux-Saga:

Khái niệm: Từ hầu như ý bên trên ta hoàn toàn có thể tóm gọn gàng Redux-Saga là một trong tlỗi viện redux middleware, giúp làm chủ đông đảo side effect trong vận dụng redux trngơi nghỉ buộc phải đơn giản rộng. Bằng vấn đề sử dụng buổi tối đa công dụng Generators (function*) của ES6, nó chất nhận được ta viết async code chú ý y như là synchronos.

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


Xem thêm: Shoutout Ask Fm Là Gì ? Cách Dùng Ask Shoutout Ask Fm Là Gì

*

III. Hướng dẫn thiết lập và sử dụng Redux-Saga

Hữu ích như vậy tuy nhiên làm rứa nào để ta bao gồm cụ vận dụng saga vào project của chúng ta?

trước hết ta cần 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 nhằm thêm middleware vào thân 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 tệp tin mySaga đã có được import sống trên:

import Call, put, takeEvery, takeLademo 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 & only the latest 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 mình tập trung phân tích và lý giải một số trong những quan niệm để các bạn hình dung được saga nó là đồ vật gi. Nó hoạt động ra làm sao.Chuyên ổn mục: Hỏi Đáp