P17:Redux-saga 的安装和配置

朴灿烈づ我的快乐病毒、 2023-10-06 20:57 3阅读 0赞

#### Redux 进阶 ####

*  阐述
 *  redux-saga 的安装
 *  引入并创建 Redux-saga
 *  创建 \`sagas.js\` 文件并引入
 *  Upfile
 *   *  demo01\\src\\store\\index.js
     *  demo01\\src\\store\\sagas.js
     *  demo01\\src\\TodoList.js

## 阐述 ##

首先声明一下，文中讲的中间件不是React的中间件，而是Redux的中间件，这一点你要明白，否则工作中会出大问题的，你的React知识架构也会出现偏差。

其实Redux的中间件不仅仅只有Redux-thunk，还有一个比较出名的是Redux-saga.当然这个中间件我们公司并没有使用，只是自己研究，所以可能讲解有不足的地方。

目前国内的IT企业一般都在使用这两个中间件，使用其它的很少，所以很有必要学习一下。

## redux-saga 的安装 ##

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

npm install --save redux-saga

github地址：https://github.com/redux-saga/redux-saga  
方便你更好的学习。

## 引入并创建 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` 的安装和配置就算完成了，之后我们就可以编写中间件了。

其实这个配置一般在项目中也只需要作一次，你完全可以收藏网页，然后需要时回来看一下就可以了。

## Upfile ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

### demo01\\src\\store\\index.js ###

### demo01\\src\\store\\sagas.js ###

function* mySaga() {
        } 
    export default mySaga;

### demo01\\src\\TodoList.js ###

import React, {
         Component } from 'react';
    import store from './store'
    
    //关键代码-------------start
    import {
        changeInputAction , addItemAction ,deleteItemAction,getListAction} from './store/actionCreators'
    //关键代码------------end
    
    import TodoListUI from './TodoListUI'
    import axios from 'axios'
    
    class TodoList extends Component {
        
    
        constructor(props){
        
            super(props)
            this.state=store.getState();
            this.changeInputValue= this.changeInputValue.bind(this)
            this.storeChange = this.storeChange.bind(this)
            this.clickBtn = this.clickBtn.bind(this)
            store.subscribe(this.storeChange) //订阅Redux的状态
        }
    
        render() {
         
            return ( 
                <TodoListUI 
                    inputValue={
        this.state.inputValue}
                    list={
        this.state.list}
                    changeInputValue={
        this.changeInputValue}
                    clickBtn={
        this.clickBtn}
                    deleteItem={
        this.deleteItem}
                />
            );
        }
    
        componentDidMount(){
        
            axios.get('http://tt.cc/test.php').then((res)=>{
            
                const data = res.data
                const action = getListAction(data)
                store.dispatch(action)
            })
        }
    
        storeChange(){
        
            // console.log('store changed')
            this.setState(store.getState())
        }
        //--------关键代码------start
        changeInputValue(e){
        
            const action = changeInputAction(e.target.value)
            store.dispatch(action)
        }
        clickBtn(){
        
            const action = addItemAction()
            store.dispatch(action)
        }
        deleteItem(index){
        
            console.log(index)
            const action = deleteItemAction(index)
            store.dispatch(action)
        }
        //--------关键代码------end
    }
    export default TodoList;

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a5b435f961c34bc9adde7878b6be929e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16