(1)概念图+简介

   Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  中间件相当于在Action到Reducer的中间放置了一个函数,常用场景:项目日志、创建奔溃报告、调用异步接口等等。

   例如之前常用案例ToDoList里的Redux结合axios异步获取数据

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  实际开发里,一般会将异步调用放到Redux中间件Redux-thunk来完成。

  Redux中间件很多,这里我们介绍一种常见的Redux-thunk.

(2)安装

  首先安装依赖

>npm i redux-thunk --save

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

(3)配置

  配置store/index.js文件,首先引入redux的applyMiddleware中间件方法,然后引入第三方中间件依赖包,接着传入调用即可

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

   测试发现中间件不能和浏览器Redux-devTools调试工具的环境变量同时存在,此时便需要用到Redux的增强函数方法

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  代码如下:

import {createStore,applyMiddleware,compose} from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'

const composeEnhancers = 
    window.__REDUX_DEVTOOLS_EXTENSION_COMPONSE_?window.__REDUX_DEVTOOLS_EXTENSION_COMPONSE__({}):compose
const enhancer = composeEnhancers(applyMiddleware(thunk))//增强函数相当于链式调用
const store = createStore(
    reducer,
    enhancer
)
export default store

  注意:官方文档没有两个函数的同时调用说明,所以这里需要用到增强函数,做个类似的链式调用

  

(4)使用

  之前案例ToDoList中,结合axios和redux完成了数据的异步请求,直接在组件里使用生命周期钩子里进行数据操作

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  因为之前redux要求必须是纯函数形式,所以我们不能直接在里面做异步操作,但现在有了中间件,可以结合中间件做处理。

  1、引入axios并编写新的action,来异步获取数据

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  编写完成后,需要调用action才会执行,所以修改组件,将原先的生命周期钩子改为调用action

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  将其改为调用action,首先引入action,然后注册调用

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  此时控制台已经打印出相关数据

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  接下来直接将其数据dispatch给reducers即可。

注意:
    这里在箭头函数中传入dispatch参数,即可在内部调用

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园、  

  当然,也可以在该文件引入store然后自行调用

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

  Redux中间件redux-thunk中间件之安装、配置、使用-冯金伟博客园

注意(Redux中间件优势对比):
   1、使用redux中间件获取数据进行处理相对之前写法,完善了很多。此时关于redux数据的持久化存储、所以业务逻辑都放到了action(Redux所属系统里),而不是生命周期里。
    2、如果将业务逻辑都放到生命周期钩子里,那么生命周期函数将会变得非常臃肿,且缺乏逻辑性 

.