Mở đầu

Trong các nội dung bài viết trước thì tôi đã giới thiệu với mọi người về react, redux và luồng hoạt động của một ứng dụng khi sử dụng redux

Bạn Đang Xem: Tìm hiểu về Redux saga

Như mọi người dân có thể thấy trong hình ảnh trên khi một kích hoạt được dispatch đến Reducer thì nó có chạy qua Middleware, vậy Middleware này thực sự có nhiệm vụ là gì?

Xem Thêm : Thermostat là gì ? Cấu tạo và nguyên lý hoạt động của Thermostat .

Trong Redux, Middleware là lớp nằm trong lòng Reducers và Actions. Vị trí mà Middleware hoạt động là trước lúc Reducers nhận được Actions và sau khi một kích hoạt được dispatch. Middleware trong Redux được nghe biết nhiều nhất trong việc xử lý 1 thao tác dị đồng bộ – thông thường ở đây là các API request.

Trong Redux có 2 thư viện khá nổi tiếng dùng làm làm nhiệm vụ giống như một middleware đó là Redux-thunk và Redux-saga. Trong nội dung bài viết này, tất cả chúng ta sẽ cùng nhau tìm hiểu về Redux-saga được triển khai thế nào trong Redux nhé.

Redux-saga là gì?

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ở thành đơ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ó được cho phép ta viết async code nhìn giống như thể synchronos.

Vậy side effect là cái gì nhỉ? Như mọi người đã biết tất cả những xử lý trong Reducers đều là đồng bộ, nhưng thực tế là có những thao tác mà ta nên phải xử lý dị đồng bộ, ví dụ như thể đợi 1 request dùng làm fetch tài liệu về rồi sau đó mới thực hiện tiếp các thao tác khác (thay đổi state, dispatch 1 action bất kỳ…) đó đấy là side effect.

Cấu trúc của một saga

Thường nhật 1 saga sẽ sở hữu dạng như vậy này:

Xem Thêm : Thông tin về Cookies

import { put, call, takeEvery } from ‘redux-saga/effects’; function* someSaga() { // Wait for (every) SOME_ACTION action takeEvery(‘SOME_ACTION’, doSomeThing); } function* doSomeThing(action}) { try { // Tell redux-saga to call fetchSomeThing with the param from action yield call(fetchSomeThing, action.payload) // Tell redux-saga to dispatch the someThingSuccess action yield put(someThingSuccess()) } catch (err) { // You get it yield put (someThingFailed(err)) } }

Tron ví dụ trên, các method mà redux-saga cung cấp put, call, takeEvery đấy là các side effect mà tất cả chúng ta đang đề cập đến. Ngoài ra thì còn có một số các effect khác hay dùng như thể: fork, select, takeLatest, take, all.

Sau đây sẽ là nhiệm vụ chính của từng method:

• put: Có nhiệm vụ dispatch 1 action
• call: Dùng làm call 1 function. Nếu nó return về một promise, tạm dừng saga cho tới khi promise được giải quyết và xử lý
• takeEvery: Thực thi và trả lại kết quả của mọi actions được gọi.
• takeLatest: Nếu tất cả chúng ta thực hiện một loạt các actions, nó sẽ chỉ trả lại kết quả của actions cuối cùng.
• Select: Call 1 selector để lấy data từ store.
• fork: Thực hiện một hoạt động non-blocking trên function được truyền cho nó.
• take: Tạm dừng cho tới khi nhận được action.
• all: Thực hiện song song tất cả những saga.

Ví dụ

import { call, put, takeLatest, fork, select, all } from ‘redux-saga/effects’; import { selectUser } from ‘./selectors’; import { GET_USER } from ‘./constants’; const requestGetUser = async userId => { // Tạo 1 function dùng làm fetch data const options = { query: { $select: [‘name’, ’email’], }, }; return await feathers.rest.service(‘users’).get(userId, options); }; function* getUser() { try { const userId = yeild select(selectUser()); // dùng select để gọi selector `selectUser` và get userId từ store const response = yield call(requestGetUser, // userId); call function `requestGetUser` yield put(getUserSucceed(response); // dispatch action `getUserSucceed` khi có response trả về } catch (err) { yield put(getUserFailed(err)); // dispatch action `getUserFailed` khi có lỗi xẩy ra } } function* getUserWatcher() { yield takeLatest(GET_USER, getUser); // Lắng tai việc dispatch action là GET_USER song song thực thi getUser mọi khi được gọi } export default function* watchSaga() { yield all([fork(getUserWatcher)]) }

Kết

Phía bên trên là 1 trong những ví dụ tiêu biểu cho việc sử dụng các effect của redux-saga. Ngoài ra, để sở hữu thể hiểu thêm rõ ràng và cụ thể về redux saga thì những bạn hãy tìm đọc ở trang chủ để nắm rõ hơn về một số vần đề như cách Inject Saga Middleware vào Redux Store, Cancel saga, hay cấu hình của redux saga cho một dự án.