## [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; ~~~