Redux-Saga là một thư viện redux middleware; công cụ này 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.
Cấu trúc của một Project Redux-saga giống như Redux nhưng ta sẽ có thêm một file saga để quản lý những action và xử lý chúng.
Middleware là gì?
Middleware là một tầng đứng giữa việc dispatch action và gửi lên reducer. Thường được dùng trong việc logging, reporting, async api, routing…
Một số middleware phổ biến hiện nay có thể kể đến như là Redux Thunk, Redux Saga...
Generator function (function*)
Generator function (function*) là một function, có khả năng tạm ngưng thực thi trước khi hàm kết thúc, và có thể tiếp tục chạy ở 1 thời điểm khác. Generator function trả về iterator, giống như con trỏ trong vòng lặp. Sau khi hàm next() của iterator được gọi, generator function sẽ thực thi hàm cho đến khi gặp từ khóa yield đầu tiên. yield sẽ trả về giá trị cho iterator, Generator function kết thúc cho đến khi hết giá trị để yield.
Blocking/ Non-blocking
Saga cung cấp những effect Blocking và Non-blocking để xử lý đồng bộ hoặc bất đồng bộ đơn giản hơn.
Link tham khảo: https://redux-saga.js.org/docs/api#effect-creators
Task
Thông thường khi sử dụng một từ khóa yield và một effect được gọi là một task.
yield delay(500)
yield put(loadUsersSuccess(response.data))
Ví dụ cụ thể
Cài đặt
Để cài đặt Redux chúng ta sử dụng câu lệnh:
npm i --save react-redux redux redux-logger redux-saga
Cách chia components trong Redux-saga
Cách chia cũng tương tự như trong Redux thông thường nhưng sử dụng thêm một file saga để xử lý
Demo
Action Type: dùng để khai báo các Type mà ta có thể tương tác
- Action: khai báo các hàm xử lý tùy theo từng Type
- Api
- Reducer: trả về các State tương ứng đối với từng Type
- Root-Reducers: Combine tất cả các reducer thành một single index reducer
- Store: Tạo một store mới từ root-reducer sau đó Khai bảo Middleware sử dụng Saga
- Usersaga: nhận dispatch action sau đó xử lý và gửi lên reducer.
put = dispatch
takeEvery: nếu có nhiều lệnh đang xử lý thì tất cả cùng được chạy cho đến khi hoàn tất
takeLastest: chỉ chạy lệnh cuối cùng và Cancel hết những lệnh đang chạy trước đó
- Tài liệu tham khảo thêm:
1. Redux Saga: 01 – Giới thiệu tổng quan về saga ?
2. https://redux-saga.js.org/docs/introduction/GettingStarted
3. https://github.com/truongnghia1199/redux-saga