對redux saga的研究

2022-06-23 19:45:12 字數 1194 閱讀 9002

中介軟體用過redux-thunk,也用過redux-promise-middleware,原理都很簡單。  

thunk就是簡單的action作為函式,在action進行非同步操作,發出新的action。

而promise只是在action中的payload作為一個promise,中介軟體內部進行處理之後,發出新的action。

這兩個簡單也容易理解,但是當業務邏輯多且複雜的時候會發生什麼情況呢?我們的action越來越複雜,payload越來越長,當然我們可以分離開來單獨建立檔案去處理邏輯,但是實質上還是對redux的action和reducer進行了汙染,讓它們變得不純粹了,action就應該作為一個訊號,而不是處理邏輯,reducer裡面處理要好一些,但是同樣會生出幾個多餘的action型別進行處理,而且也只能是promise,不能做複雜的業務處理。

redux-saga將進行非同步處理的邏輯剝離出來,單獨執行,利用generator實現非同步處理。

saga任務,新建檔案處理業務邏輯,使用generator,redux-saga提供很多函式方便處理,put發出action,takeevery監聽action,takelatest只執行最後一次action,call執行函式,並且可以獲取promise的資料

import  from 'redux-saga'

import from 'redux-saga/effects'

export function* hello()

const ajax = () => new promise(resolve=>settimeout(()=>resolve(99), 4000))

export function* incrementasync() )

}export function* watchincrementasync()

export default function* rootsaga()

啟動generator

const sagamiddleware = createsagamiddleware()

const store = createstore(

reducer,

)sagamiddleware.run(rootsaga)