• react创建项目学习基础语法Redux的中间件redux-thunk 、redux-saga的简单应用(四)


    1.安装  npm install --save redux-thunk

    2.安装  npm install --save redux-saga

    二者可选择其中一样使用;

    // store/index文件  如果你要使用中间件,就必须在redux中引入applyMiddleware
    import { createStore, applyMiddleware, compose   } from 'redux';
    // import thunk from 'redux-thunk'
    import reducer from './reducer'    
    import mySaga from './mySaga'
    import createSagaMiddleware from 'redux-saga'   //引入saga
    const sagaMiddleware = createSagaMiddleware();   //创建saga中间件
    
    // 使用Chrome浏览器安装插件,在浏览器右上角有三个点,然后点击"更多工具",再点击"扩展程序",再点击右侧的"打开Chrome网上商店",然后搜索Redux DevTools 直接安装;(翻墙工具)
    // 配置Redux Dev Tools插件 控制台调试仓库数据
    // const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
    // redux-thunk 要和 Redux Dev Tools插件一并使用了,需要使用增强函数。使用增加函数前需要先引入compose
    // Redux的中间件  redux-thunk Redux-saga
    const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
    
    // const enhancer = composeEnhancers(applyMiddleware(thunk)) // 如果你想用 redux-thunk
    
    const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware)) // 如果你想用 redux-saga
    
    const store = createStore(reducer, enhancer) // 创建数据存储仓库
    
    // then run the saga
    sagaMiddleware.run(mySaga)
    
    export default store
    
    // 官方写法
    // const store = createStore(
    //   reducer,
    //   applyMiddleware(thunk)
    // ) 
    // 在store文件夹下面新建 mySaga.js
    // import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
    
    // Sagas 可以多种形式 yield Effect。最简单的方式是 yield 一个 Promise。
    // Generator 函数
    // mySaga.js 编写业务逻辑
    
    // 注意,使用 yield* 将导致该 Javascript 运行环境 漫延 至整个序列。 由此产生的迭代器(来自 game())将 yield 所有来自于嵌套迭代器里的值。一个更强大的替代方案是使用更通用的中间件组合机制。
    function* mySaga() {
      yield console.log(1111)
    }
    
    export default mySaga;
  • 相关阅读:
    前端一些词汇的缩写
    github上值得关注的前端项目
    window注册表
    注册表删除chrome插件
    js二维码扫描
    git push --no-thin
    mac下app store 无法完成您的购物操作
    git终端提示符
    mac 下 apache设置
    windows 下 apache设置
  • 原文地址:https://www.cnblogs.com/lhl66/p/12486976.html
Copyright © 2020-2023  润新知