React, Redux Saga Là Gì – Giới Thiệu Về Redux Saga

Để hiểu redux-saga là gì thì đầu tiên 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 có thể nhìn vào hình ảnh sau đây.Bạn đang xem: Redux saga là gì

Đang xem: Redux saga

Tại đây middleware nằm giữa action và reducers, và nó thực hiện gọi đến API. Vậy ta 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, nhiệm vụ của người gián điệp này là ngồi đợi tên trùm giao nhiệm vụ (action) cho đàn em của hắn(reducers), thực hiện 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) để tiến hành vây bắt. Thế là kết quả của phi vụ này bị thay đổi. Tên trùm bị ngồi tù, đàn em thì giải tán.

Side Effect:

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,….

Generator function:

Redux-Saga:

Khái niệm: Từ những ý trên ta có thể tóm gọn Redux-Saga là một thư viện redux middleware, giúp quản lý những 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.

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

Xem thêm: Hướng Dẫn Trade Coin Toàn Tập Từ A Bán Bitcoin Trên Sàn Binance Dành Cho Người

Xem thêm: Khí Ozone Là Gì? Tính Chất Và Các Ứng Dụng Trong Đời Sống Ozone Là Gì

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?

Đầu tiên ta cần install redux-saga vào trong project:$ npm install –save redux-sagaor$ 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: Hỏi Đáp