安裝redux-saga
出發點跟redux-thunk
是一樣的,為了解決非同步操作,把非同步的邏輯單獨的放到乙個saga.js
檔案裡面。 採用的是generator
函式進行構建的。國內文件。
yarn add redux-saga
使用:配置入口,一般在store/index.js
入口檔案中進行配置,建立乙個hellosaga
:
import reducer from './reducer'
import createsagamiddleware from 'redux-saga'
import from './sagas'
// 引入中介軟體
const sagamiddleware = createsagamiddleware()
const composeenhancers = window.__redux_devtools_extension_compose__ ?
window.__redux_devtools_extension_compose__() : compose
const enhancer = composeenhancers(
);const store = createstore( reducer, enhancer )
// 必須有個run函式,才能可以訪問
sagamiddleware.run(hellosaga)
export
default store
然後在sagas.js
進行寫非同步函式:
import from 'redux-saga/effects'
// tabeevery 捕捉每乙個action put也可以傳送action到store裡面
import from './actiontypes'
import axios from 'axios'
function* fetchuser()
// 提交這個actions 到store裡面,和在reducer裡面提交是一樣的
yield put( actions )
}export function* hellosaga()
最後呼叫的地方是在元件裡面,某個鉤子函式裡面,發出action的呼叫:
componentdidmount
()
因此,從上面我們可以看出來:除了在reducer
可以接受action
以外,使用saga
以後就可以在sagas
檔案裡面也可以捕獲到action
,進行一步處理。
相比較於複雜的,比較多的api,處理非常大型的專案的時候是優於redux-thunk
的。
react中介軟體
中介軟體是對store.dispatch的改造 promisemiddleware 其實上面的 thunk 我們已經有了處理非同步的能力,但是每次我們要自己去手動觸發三個 action,工作量還是很大的。現在 ajax 很多都會包裝為 promise 物件,因此我們可以對與 dispatch 增加一...
React中介軟體
from redux 使用中介軟體 import reducer from reducer index.js import logger from redux logger 能夠在控制台直觀的看到更改狀態的type型別以及更改狀態前後的值 import reduxthunk from redux t...
中介軟體 訊息中介軟體學習總結
冪等 在程式設計中.乙個冪等操作的特點是其任意多次執行所產生的影響均與一次執行的影響相同。冪等函式,或冪等方法,是指可以使用相同引數重複執行,並能獲得相同結果的函式。這些函式 不會影響系統狀態,也不用擔心重複執行會對系統造成改變。例如,getusername 和settrue 函式就是乙個冪等函式....