启用
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducer from './reducers'
import rootSaga from './sagas'
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
// then run the saga
sagaMiddleware.run(rootSaga)
redux-saga概念
- 在redux-saga中的函数分为两种:
- watcher saga:接收特定的action,然后驱动worker saga执行
- worker saga: 实现具体的业务逻辑操作
function* workerSaga(action) {
try {
const user = yield call(Api.fetchUser, action.payload.userId);
yield put({type: "USER_FETCH_SUCCEEDED", user: user});
} catch (e) {
yield put({type: "USER_FETCH_FAILED", message: e.message});
}
}
function* watcherSaga() {
yield takeEvery("USER_FETCH_REQUESTED", workerSaga);
}
watcherSaga:watcherSaga
中使用了redux-saga提供的API函数takeEvery()
,当有接收到USER_FETCH_REQUESTED
action
时,会启动worker saga
。
- (另一个常用的辅助函数
takeLatest()
,当有相同的action发送过来时,会取消当前正在执行的任务并重新启动一个新的worker saga)
workerSaga:通过call()以及put()这样的函数来派发action
或者执行其他异步函数 => Effect
- 实际上,我们直接通过yield fetchUser()执行我们的异步任务,并返回一个Promise也是可以的,但不推荐。
如果你想要同时监听不同的action,可以使用all()或者race()把他们组合成一个root saga:
export default function* rootSaga() {
yield all([
takeEvery("FOO_ACTION", fooASaga),
takeEvery("BAR_ACTION", barASaga)
])
}