redux架构中,如果action里有诸如网络请求、磁盘读写等异步操作,会提示使用中间件解决。redux-saga可以用来做这件事。项目引入redux-saga后,可以让action做纯粹的action,一些有副作用的action交给saga管理。
这里介绍一个比较常用的情况,用fetch从服务端请求数据。
在管理action处会用到redux-saga中的以下接口:
- call,至少接受一个方法名,比如调用fetch方法
- put,相当于redux中的dispatch
- takeEvery,接受一个action和方法名,全局环境下时刻监听,只要dispatch这个action,便会执行相应的方法
相应代码如下:
import
import { call, put, takeEvery } from 'redux-saga/effects'
fetch
function fetchAPI() {
return fetch(fetchUrl)
.then(res => (
res.json()
))
.then(resJson => (
resJson
))
.catch(err => (
err.message
))
.done()
}
异步处理(async以同步形式写异步)
function* fetchUser() {
try {
const response = yield call( fetchAPI );
// 或者
// const response = yield call( fetch, fetchUrl );
// 将上一步调用fetch得到的结果作为某action的参数dispatch,对应saga的put
yield put({ type: 'RECEIVE_DATA_SUCCESS', data: response });
} catch (error) {
yield put(fetchFailure());
}
}
注册监听函数
export default function* event() {
// 一旦'FETCH_DATA_REQUEST'在别处被dispatch,会立即调用fetchUser这个函数,fetchUser再调用fetch,做异步处理后完成相应动作,比如成功就dispatch 'RECEIVE_DATA_SUCCESS',进而在reducer中更新state
yield takeEvery('FETCH_DATA_REQUEST', fetchUser);
}
以上是一个简单的redux-saga处理fetch请求的操作,最后,需要在createStore这里注册中间件才能使用。
需要引入导出的监听函数,并在store生成后run这个函数
'use strict'
// Redux
import { applyMiddleware, combineReducers, createStore } from 'redux'
import logger from 'redux-logger'
// redux saga
import createSagaMiddleware from 'redux-saga'
// 引入导出的监听函数
import rootSaga from '../sagas/index'
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
combineReducers({
...reducers
}),
applyMiddleware(sagaMiddleware, logger)
)
sagaMiddleware.run(rootSaga)
export default store;