Redux中间件-thunk和saga

﹏ヽ暗。殇╰゛Y 2022-11-21 01:03 220阅读 0赞

#### 1.Redux-thunk中间件 ####

##### 1.1 安装及配置 #####

`Redux-thunk`并不在`Redux`基础组件中，需要进行安装。

npm install --save redux-thunk

在/store/index.js中引入redux-thunck。

1.引入`applyMiddleware`,如果你要使用中间件，就必须在redux中引入`applyMiddleware`.

import {  createStore , applyMiddleware } from 'redux'

2.引入`redux-thunk`库

import thunk from 'redux-thunk'

如果你按照官方文档来写，你直接把thunk放到`createStore`里的第二个参数就可以了，但以前配置了`Redux Dev Tools`，已经占用了第二个参数。

官方文档给的方法:

const store = createStore(
        reducer,
        applyMiddleware(thunk)
    ) // 创建数据存储仓库

这样写是完全没有问题的，但是的`Redux Dev Tools`插件就不能使用了，如果想两个同时使用，需要使用**增强函数**。使用增加函数前需要先引入`compose`。

import {  createStore , applyMiddleware ,compose } from 'redux'

然后利用`compose`创造一个增强函数，就相当于建立了一个链式函数，代码如下:

const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ }):compose

有了增强函数后，就可以把`thunk`加入进来了，这样两个函数就都会执行了。

const enhancer = composeEnhancers(applyMiddleware(thunk))

这时候直接在`createStore`函数中的第二个参数，使用这个`enhancer`变量就可以了，相当于两个函数都执行了。

const store = createStore( reducer, enhancer) // 创建数据存储仓库

也许你对增加函数还不能完全理解，其实你完全把这个想成固定代码，直接使用就好，我在这里给出全部代码，方便你以后学习使用。

import {  createStore , applyMiddleware ,compose } from 'redux'  // 引入createStore方法
    import reducer from './reducer'    
    import thunk from 'redux-thunk'
    
    const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ }):compose
    
    const enhancer = composeEnhancers(applyMiddleware(thunk))
    
    const store = createStore( reducer, enhancer) // 创建数据存储仓库
    export default store   //暴露出去

##### 1.2 使用 #####

以前`actionCreators.js`都是定义好的action，根本没办法写业务逻辑，有了`Redux-thunk`之后，可以把App.js`中的`componentDidMount`业务逻辑放到这里来编写。也就是把向后台请求数据的代码放到`actionCreators.js`文件里。那需要引入`axios`,并写一个新的函数方法。（以前的action是对象，现在的action可以是函数了，这就是`redux-thunk\`带来的好处）

import axios from 'axios'
    //其余省略
    export const getTodoList = () =>{ 
        return ()=>{ 
            axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList').then((res)=>{ 
                const data = res.data
                console.log(data)
            })
        }
    }

现在需要执行这个方法，并在控制台查看结果，这时候可以修改`App.js`文件中的`componentDidMount`代码。

//先引入getTodoList
    import { getTodoList , changeInputAction , addItemAction ,deleteItemAction,getListAction} from './store/actionCreatores'
    componentDidMount(){ 
        const action = getTodoList()
        store.dispatch(action)
    }

然后到浏览器的控制台中查看一下，看看是不是已经得到了后端传给的数据。得到之后，继续走以前的Redux流程就可以ok。

export const getTodoList = () =>{ 
        return (dispatch)=>{ 
            axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList').then((res)=>{ 
                const data = res.data
                const action = getListAction(data)
                dispatch(action)
    
            })
        }
    }

这个函数可以直接传递`dispatch`进去，这是自动的，然后直接用`dispatch(action)`传递就好了。现在就可以打开浏览器进行测试了。

这时候还会有一些警告，主要是引入了并没有使用，按照警告的提示，删除没用的引入就可以了。

#### 2.Redux-saga中间件 ####

**首先，中间件不是`React`的中间件，而是`Redux`的中间件。**

##### 2.1 安装及配置 #####

npm install --save redux-saga

github地址：

> https://github.com/redux-saga/redux-saga

配置及使用省略。

个人博客：[Karma‘s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/29/34%20Redux%E4%B8%AD%E9%97%B4%E4%BB%B6/
[Link 1]: https://github.com/kay-520/React_study