Redux教程：Middleware

Redux本身是同步的，那么异步操作（例如网络请求）如何与Redux一起使用？Middleware在这里很方便。如前所述，减速器是编写所有执行逻辑的地方。Reducer与执行该操作的人，执行该操作之前和之后花费多少时间或记录应用程序状态无关。

在这种情况下，Redux Middleware功能提供了一种在调度器到达化简器之前与调度的动作进行交互的介质。可以通过编写包含一些逻辑的高级函数（返回另一个函数的函数）来创建自定义的Middleware函数。可以将多个Middleware组合在一起以添加新功能，并且每个Middleware不需要了解之前和之后的情况。您可以想象Middleware介于调度的动作和reducer之间。

通常，Middleware用于处理应用程序中的异步操作。Redux提供了一个名为applyMiddleware的API，该API允许我们使用自定义Middleware以及Redux-thunk和redux-promise之类的Redux Middleware。它将Middleware应用于存储。使用applyMiddleware API的语法是：

applyMiddleware(...middleware)

这可以应用于存储如下：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

Middleware使您可以编写一个动作分派器，该分派器返回一个函数而不是一个动作对象。相同的示例如下所示：

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

可以在Middleware内部编写条件调度。每个Middleware都接收商店的分派，以便它们可以分派新的动作，而getState函数则作为参数，以便它们可以访问当前状态并返回一个函数。内部函数的任何返回值都可以用作调度函数本身的值。

以下是Middleware的语法：

({ getState, dispatch }) => next => action

getState函数可用于根据当前状态决定是要获取新数据还是应返回缓存结果。

让我们看一个自定义Middleware记录器功能的例子。它只是记录操作和新状态。

import { createStore, applyMiddleware } from 'redux'
import userLogin from './reducers'

function logger({ getState }) {
   return next => action => {
      console.log(‘action’, action);
      const returnVal = next(action);
      console.log('state when action is dispatched', getState()); 
      return returnVal;
   }
}

现在，通过编写以下代码行，将记录器Middleware应用于商店：

const store = createStore(userLogin , initialState=[ ] , applyMiddleware(logger));

使用以下代码调度动作以检查调度的动作和新状态：

store.dispatch({
   type: 'ITEMS_REQUEST', 
 isLoading: true
})

下面给出了另一个Middleware示例，您可以在其中显示或隐藏加载器的时间。当您请求任何资源时，此Middleware将显示加载程序，而在资源请求完成时将其隐藏。

import isPromise from 'is-promise';

function loaderHandler({ dispatch }) {
   return next => action => {
      if (isPromise(action)) {
         dispatch({ type: 'SHOW_LOADER' });
         action
            .then(() => dispatch({ type: 'HIDE_LOADER' }))
            .catch(() => dispatch({ type: 'HIDE_LOADER' }));
      }
      return next(action);
   };
}
const store = createStore(
   userLogin , initialState = [ ] , 
   applyMiddleware(loaderHandler)
);