zoukankan      html  css  js  c++  java
  • 使用redux-saga中间件实现异步数据请求

    概述:

    react-saga有3个重要的函数:call ,put takeEvery。

    • call:在worker saga里执行异步函数;
    • put:异步函数有结果的时候,派发action;
    • takeEvery:当监听到aciton时,执行worker saga。

    saga主要用到的是generator。

    使用:

    新建sagas.js

    import { takeEvery , put} from 'redux-saga/effects'
    import axios from 'axios';
    import { GET_INIT_LIST } from './actionType';
    import { initListAction} from './actionCreator';
    //worker saga
    function* todolist() {
        //异步获取数据
        try{
            const res = yield  axios.get('api/list');
            const action=initListAction(res.data);
            yield put(action);
        }catch(e){
            console.log('list.json 网络请求失败')
        }
    }
    //当type为GET_INIT_LIST的action触发时,调用todolist函数
    function* mySaga() {
      yield takeEvery(GET_INIT_LIST, todolist);
    }
    
    export default mySaga;

    创建store的时候,按照文档配置好redux-saga

    import { createStore, applyMiddleware ,compose} from 'redux';
    import reducer from './reducer'
    import createSagaMiddleware from 'redux-saga'
    import mySaga from './sagas'
    //1.创建中间件
    const sagaMiddleware = createSagaMiddleware();
    //2.应用中间件
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
    const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));
    const store = createStore(reducer, enhancer);
    //3.执行run
    sagaMiddleware.run(mySaga)
    export default store;

     组件里还是和之前一样

    componentDidMount(){
    	const action=getInitListAction();
    	store.dispatch(action);
    }
    

      

  • 相关阅读:
    linux安装日志切割程序
    Linux下安装JDK
    深入理解Java注解类型(@Annotation)
    23种设计模式--代理模式-Proxy
    23种设计模式--建造者模式-Builder Pattern
    23种设计模式--工厂模式-Factory Pattern
    23种设计模式
    Java集合框架学习笔记
    MySQL入门笔记(一)
    二进制运算基础
  • 原文地址:https://www.cnblogs.com/superlizhao/p/9441735.html
Copyright © 2011-2022 走看看