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;