P17:Redux-saga 的安装和配置

Posted 2022-01-06 wgchen~

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

demo01\\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

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;