P17:Redux进阶-Redux-saga的安装和配置

首先声明一下,文中讲的中间件不是React的中间件,而是Redux的中间件,这一点你要明白,否则工作中会出大问题的,你的React知识架构也会出现偏差。其实Redux的中间件不仅仅只有Redux-thunk,还有一个比较出名的是Redux-saga.当然这个中间件我们公司并没有使用,只是自己研究,所以可能讲解有不足的地方。目前国内的IT企业一般都在使用这两个中间件,使用其它的很少,所以很有必要学习一下。

redux-saga的安装

你可以直接使用npm来进行安装,当然用yarn也是没有问题的,根据自己的喜好吧。我这里使用了npm来进行安装。

npm install --save redux-saga

github地址,方便你更好的学习。

引入并创建Redux-saga

安装好后,就可以使用了,直接在/src/store/index.js里引入redux-saga,并创建一个sagaMiddleware,代码如下:

import createSagaMiddleware from 'redux-saga'   //引入saga
const sagaMiddleware = createSagaMiddleware();   //创建saga中间件

创建好后,还是用Redux的增强函数进行传递。也就是把原来的Redux-thunk替换成saga中间件(注意去掉原来不用的redux-thunk引入)。

import { createStore , applyMiddleware ,compose } from 'redux'  //  引入createStore方法
import reducer from './reducer'   
//------关键代码----start----------- 
import createSagaMiddleware from 'redux-saga' 
const sagaMiddleware = createSagaMiddleware();
//------关键代码----end-----------

const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose
//------关键代码----start-----------
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))
//------关键代码----end-----------

const store = createStore( reducer, enhancer) // 创建数据存储仓库
export default store   //暴露出去

这步完成后,就把原来的redux-thunk替换成redux-saga了,当然,现在我们还不能使用,我们还需要继续配置sagas.js文件。

创建sagas.js文件并引入

redux-saga希望你把业务逻辑单独写一个文件,这里我们在/src/store/文件夹下建立一个sagas.js文件。

function* mySaga() {} 
export default mySaga;

创建好以后直接引入到index.js里。

import mySagas from './sagas'

然后执行run方法,让saga运行起来。

sagaMiddleware.run(mySagas)

为了方便你学习,这里给出/src/store/index.js的全部内容。

import { createStore , applyMiddleware ,compose } from 'redux'  //  引入createStore方法
import reducer from './reducer'   
import createSagaMiddleware from 'redux-saga' 
import mySagas from './sagas' 

const sagaMiddleware = createSagaMiddleware();

const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))
const store = createStore( reducer, enhancer) 
sagaMiddleware.run(mySagas)

export default store

现在已经完全替换成redux-saga了,所以以前在TodoList.js中的代码需要删除,不删除就会报错。主要删除componentDidMount声明周期函数里的代码。 这样redux-saga的安装和配置就算完成了,之后我们就可以编写中间件了。其实这个配置一般在项目中也只需要作一次,你完全可以收藏网页,然后需要时回来看一下就可以了。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P17:Redux进阶-Redux-saga的安装和配置

发表评论

提供最优质的资源集合

立即查看 了解详情