redux-saga中间件
- 也是一个做异步拆分的中间件
- 安装 yarn add redux-saga
- import creatSagaMiddleware from 'redux-saga'
- import TodoSagas from './saga'
- const sagaMiddleware = creatSagaMiddleware()
- const enhancer = composeEnhancers(applyMiddleware(creatSagaMiddleware))
- sagaMiddleware.run(TodoSagas)
// store中index文件
import { createStore, applyMiddleware, compose } from 'redux'
import creatSagaMiddleware from 'redux-saga'
import TodoSagas from './saga'
import todoListReducer from './reducer' // 引入图书列表
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose
const sagaMiddleware = creatSagaMiddleware()
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))
sagaMiddleware.run(TodoSagas)
const store = createStore(
todoListReducer,
enhancer
)
export default store
//在store中 创建sagajs文件
import {takeEvery, put} from 'redux-saga/effects'
import {GET_INIT_LIST} from './actionTypes'
import {initData} from './actionCreators'
import axios from 'axios'
// es6的generator函数 添加yield会等待异步执行,异步请求执行完之后再执行之后的代码
function* getInitList() {
// es6的generator函数 可以使用try--catch捕捉异常
try{
const res = yield axios.get('http://getTodoList');
const action = initData(res.data.data)
yield put(action)
}catch(e){
console.log('http://getTodoList 网络请求失败')
}
}
// sagajs中一定要写这个函数
function* mySaga() {
// 捕捉action的类型
yield takeEvery(GET_INIT_LIST, getInitList)
}
export default mySaga