redux-saga
出发点跟redux-thunk
是一样的,为了解决异步操作,把异步的逻辑单独的放到一个saga.js
文件里面。 采用的是generator
函数进行构建的。国内文档。
安装 yarn add redux-saga
使用:
- 配置入口,一般在
store/index.js
入口文件中进行配置,创建一个hellosaga
:
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer'
import createSagaMiddleware from 'redux-saga'
import { helloSaga } from './sagas'
// 引入中间件
const sagaMiddleware = createSagaMiddleware()
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ }) : compose
const enhancer = composeEnhancers(
applyMiddleware(sagaMiddleware)
);
const store = createStore( reducer, enhancer )
// 必须有个run函数,才能可以访问
sagaMiddleware.run(helloSaga)
export default store
然后在sagas.js
进行写异步函数:
import { put, takeEvery, all, call } from 'redux-saga/effects'
// tabeEvery 捕捉每一个action put也可以发送action到store里面
import { GET_INIT_LIST } from './actionTypes'
import axios from 'axios'
function* fetchUser(){
let getAjax = yield axios.get('/test.json')
let actions = {
type:'init_state_sync',
value: getAjax.data.list
}
// 提交这个actions 到store里面,和在reducer里面提交是一样的
yield put( actions )
}
export function* helloSaga() {
// 很重要的一点,进行捕获 组件里面发出的tyepe类型是 GET_INIT_LIST 的action
yield takeEvery( GET_INIT_LIST, fetchUser )
}
最后调用的地方是在组件里面,某个钩子函数里面,发出action的调用:
componentDidMount(){
let actions = getInitdataList()
store.dispatch( actions )
}
因此,从上面我们可以看出来:除了在reducer
可以接受 action
以外,使用saga
以后就可以在sagas
文件里面也可以捕获到action
,进行一步处理。
相比较于复杂的,比较多的api,处理非常大型的项目的时候是优于redux-thunk
的。