Tìm hiểu về Redux-saga – Dogoo Blog

Posted on by mtoplistChuyên mục:Top List

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.

Cơ chế hoạt động của Redux-sage

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ý 

Cách chia components trong Redux-sagaTham khảo cách chia component trong redux-saga

Demo

Action Type: dùng để khai báo các Type mà ta có thể tương tác 

Action Type trong redux SagaAction Type trong redux saga

  1. Action: khai báo các hàm xử lý tùy theo từng Type 

Action trong Redux sagaAction trong Redux saga

  1. Api

Api trong redux sagaApi trong redux saga

  1. Reducer: trả về các State tương ứng đối với từng Type
  2. Root-Reducers: Combine tất cả các reducer thành một single index reducer

reducer trong redux saga
reducer trong redux saga

  1. Store: Tạo một store mới từ root-reducer sau đó Khai bảo Middleware sử dụng Saga

store trong redux saga

  1. Usersaga: nhận dispatch action sau đó xử lý và gửi lên reducer.

usersaga trong redux saga

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 đó

TakeLastest trong redux saga

  1. 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

mtoplist