redux-saga学习(三)

redux-saga

• 安装redux-saga(参考githup 地址：链接描述)

yarn add redux-saga

• redux-saga简单使用

import { createStore ,applyMiddleware ,compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import mySaga from './sagas';
// import thunk from 'redux-thunk';
import  reducer  from './reducer';
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;

• 对应创建sagas.js,把对应的请求统一放在sagas.js来管理

import {  put, takeEvery } from 'redux-saga/effects';
import { GET_LIST_DATA } from './actionTypes';
import { initList } from './actionCreators';
import axios from 'axios';
function* fetchUser(action) {
    try {
        let  resData =  yield  axios.get('/list.json');
       
        const data = resData.data.list;
        console.log(data);
        yield put(initList(data))
    } catch (e) {
       console.log("网络请求失败")
    }
 }
function* mySaga() {
yield takeEvery(GET_LIST_DATA, fetchUser);
  }
  
export default mySaga;