## [1.安装redux-saga](https://github.com/redux-saga/redux-saga) ~~~ npm install --save redux-saga ~~~ ~~~ yarn add redux-saga ~~~ ## 2.配置store/index.js ~~~ import { createStore, applyMiddleware, compose } from 'redux'; import reducer from './reducer'; import createSagaMiddleware from 'redux-saga' import mySaga 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 ); sagaMiddleware.run(mySaga) export default store; ~~~ >Tip：在这个文件中配置之后,不仅reducer可以接收到action,sagas这个文件也可以接收到action。 ## 3配置sagas.js ~~~ import { takeEvery, put } from 'redux-saga/effects'; import { http } from './actionTypes'; import { getHttpData } from './actionCreators'; import axios from 'axios-jsonp-pro'; function* getListData() { try { var url = "https://api.douban.com/v2/movie/top250" const res = yield axios.jsonp(url); var subjects = res.subjects; var titles = [] subjects.forEach(ele => { var title = ele.title titles.push(title) }) const action = getHttpData(titles); yield put(action); }catch(e){ console.log("地址无效") } } function* mySaga() { /* takeEvery捕捉action的类别 */ /* 只要接受到getHttpData,就会执行fetchUser */ /* 捕获action */ yield takeEvery(http, getListData); } export default mySaga; ~~~