• react入门系列之redux-saga中间件


    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
    
  • 相关阅读:
    HTML5 新增元素梳理
    HTML布局梳理
    ES6中新增let命令使用方法
    xml学习-语法规则
    初步了解URL
    JavaScript——装饰者模式
    移动视频技术——新增API可手工修正视频方向
    如何在移动视频开发中使用ip组播技术
    Windows平台AnyChat视频显示
    如何实现音频合成立体声录制?
  • 原文地址:https://www.cnblogs.com/boye-1990/p/11475387.html
Copyright © 2020-2023  润新知