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;