Redux-----------中间件

1.中间件概述

默认情况下，Redux 自身只能处理同步数据流。但是在实际项目开发中，状态的更新、获取，通常是使用异步操作来实现。

* 问题：如何在 Redux 中进行异步操作呢?
* 回答：通过 Redux 中间件机制来实现异步操作

中间件说明：

       * 中间件，可以理解为处理一个功能的中间环节
       * 下图中，自来水从水库到用户家庭中的每一个环节都是一个中间件
       * 中间件的优势：可以串联、组合，在一个项目中使用多个中间件
       * **Redux 中间件用来处理 状态 更新，也就是在 状态 更新的过程中，执行一系列的相应操作

 

---

2.redux-logger中间件

使用redux-logger中间件记录日志（操作前，操作后数据查看）

步骤：1.安装 (npm i redux-logger)

           2.导入 redux-logger 中间件 (import logger from 'redux-logger')

           3.从 redux 中导入 `applyMiddleware` 函数 (import { createStore, applyMiddleware } from 'redux')

           4.调用 applyMiddleware() 并传入 logger 中间件作为参数

           5.将 applyMiddleware() 调用作为 createStore 函数的第二个参数

           调用 store.dispatch() 查看 console 中 logger 中间件记录的日志信息

 代码：store/index.js

+ import { createStore, applyMiddleware } from 'redux'
+ import logger from 'redux-logger'
import rootReducer from './reducers'

 const store = createStore(
 rootReducer,
+ applyMiddleware(logger)
 )

---

3. redux-thunk 中间件

   使用redux-thunk中间件处理异步操作

   步骤：1.安装 （npm i redux-thunk）

              2.导入

              3.将 thunk 添加到 applyMiddleware 函数的参数（中间件列表）中

              4.创建函数形式的 action，在函数中执行异步操作

  store/index.js

// 导入 thunk 中间件
import thunk from 'redux-thunk'
// 将 thunk 添加到中间件列表中
// 知道：如果中间件中使用 logger 中间件，logger 中间件应该出现在 applyMiddleware 的最后一个参数
const store = createStore(rootReducer, applyMiddleware(thunk, logger))

   语法：* thunk action 是一个函数
             * 函数包含两个参数：1 dispatch 2 getState

   代码：

// 函数形式的 action
const thunkAction = () => {
  return (dispatch, getState) => {}
}

// 解释：
const thunkAction = () => {
  // 注意：此处返回的是一个函数，返回的函数有两个参数：
    // 第一个参数：dispatch 函数，用来分发 action
  // 第二个参数：getState 函数，用来获取 redux 状态
  return (dispatch, getState) => {
    setTimeout(() => {
      // 执行异步操作
      // 在异步操作成功后，可以继续分发对象形式的 action 来更新状态
    }, 1000)
  }
}

 使用 `redux-thunk` 中间件前后对比：

        1.不使用 redux-thunk 中间件，action 只能是一个对象

        2.使用 redux-thunk 中间件后，action 既可以是对象，又可以是函数

// 1 对象：
// 使用 action creator 返回对象
const increment = payload => ({ type: 'counter/increment', payload })
// 分发同步 action
dispatch(increment(2))

// 2 函数：
// 使用 action creator 返回函数
const incrementAsync = () => {
  return (dispatch, getState) => {
    // ... 执行异步操作代码
  }
}
// 分发异步 action
dispatch(incrementAsync())

---

4.redux-devtools-extension 中间件

使用chrome开发者工具调试跟踪redux状态

步骤：1.浏览器中安装扩展程序

           2.项目中安装 （npm i redux-devtools-extension）

           3.从该中间件中导入 composeWithDevTools 函数

           4.调用该函数，将 applyMiddleware() 作为参数传入

           5.打开浏览器的 redux 开发者工具并使用

import thunk from 'redux-thunk'
+ import { composeWithDevTools } from 'redux-devtools-extension'

- const store = createStore(rootReducer, applyMiddleware(logger, thunk))

+ const store = createStore(reducer, composeWithDevTools(applyMiddleware(logger, thunk)))

export default store

---

了解：redux 中间件原理

     * Redux 中间件原理：创建一个函数，**包装 store.dispatch**，使用新创建的函数作为新的 dispatch
     * 比如下图，logger 就是一个中间件，使用该中间件后 store.dispatch 就是包装后的新 dispatch
     * 中间件修改了 store.dispatch，在分发动作和到达 reducer 之间提供了扩展
     * redux 中间件采用了 **洋葱模型** 来实现

---

 了解：函数柯里化

---

了解：redux 异步数据流