Tìm hiểu về Redux Saga

Bài đăng này đã không được cập nhật trong 4 năm

Sơ lược về Redux-Saga

Redux-Saga là một thư viện Redux middleware được tạo ra với mục đích dùng để quản lý các side effect (các hành động bất đồng bộ trong ứng dụng như fetch data hay gọi api,...) một cách dễ dàng hơn, thực thi hiệu quả cũng như dễ dàng sửa lỗi và bảo trì trong quá trình viết app React-Redux nhờ việc sử dụng một tính năng của ES6 là Generators, giúp cho các luồng bất đồng bộ trở nên dễ đọc, ghi và kiểm tra.

Khái niệm Generator function

Generator function được hiểu đơn giản là một function. Tuy nhiên thay vì chạy và kết thúc như bình thường thì generator function có thể tạm ngưng trước khi hàm kết thúc và có thể tiếp tục thực thi tại một thời điểm khác bằng cách sử dụng từ khóa "Yield".

Cách hoạt động của Redux-Saga

Redux-saga là một middleware nằm giữa action và store. Khi thực thi chúng ta sẽ cung cấp một hàm cho saga và hàm này sẽ kiểm soát các action trước khi được vào store, nếu đúng là action được nhắm tới, nó sẽ thực thi đúng hàm cần thiết và dispatch sang reducers.

Ví dụ cơ bản

Ở phần này để dễ hiểu và tiếp cận, chúng ta sẽ cùng đi vào một ví dụ vô cùng cơ bản về Redux-Saga.

Đầu tiên tạo một app React và cài đặt redux, react-redux và redux-saga.
Trong folder src, tạo file saga.js như sau:
```
import { takeEvery } from "redux-saga/effects";

export function* helloWorld() {
    yield takeEvery("HELLO", () => {
        console.log('Saga say "Hello World!"');
    });
}
```
Trong đoạn code trên có sử dụng takeEvery effect để bắt tất cả các action có type là HELLO và chạy hàm log ra Saga say "Hello World". Bên cạnh takeEvery, Saga cũng hỗ trợ nhiều effect khác như take, takeLastest, takeLeading,.. tùy theo nhu cầu của chúng ta.

Ở file index.js, chúng ta có code như sau:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { applyMiddleware, compose, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import { helloWorld } from "./saga";
import reducer from "./reducer";

//Khởi tạo saga middleware
const sagaMiddleWare = createSagaMiddleware();

const store = createStore(
    reducer,
    compose(
        applyMiddleware(sagaMiddleWare),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);

//Chạy watcher saga
sagaMiddleWare.run(helloWorld);

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

Vậy là mỗi khi action HELLO được gọi, Saga say "Hello World!" sẽ được in ra

Tổng kết

Trong bài viết này, mình đã giới thiệu sơ lược về React-Redux, mong sẽ giúp được các bạn trong quá trình làm quen và học tập. Cảm ơn các bạn đã dành thời gian đọc bài viết, mong nhận được sự góp ý từ mọi người. Nguồn tham khảo: https://redux-saga.js.org/

Redux-saga