13 Redux中间件-thunk和saga

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

配置及使用省略。