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:
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.import { takeEvery } from "redux-saga/effects"; export function* helloWorld() { yield takeEvery("HELLO", () => { console.log('Saga say "Hello World!"'); }); }
- Ở file index.js, chúng ta có code như sau:
Vậy là mỗi khi action HELLO được gọi, Saga say "Hello World!" sẽ được in raimport 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") );
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/