redux中间件 – Redux教程 _redux教程

上一章Redux教程请查看：redux reducer
Redux本身是同步的，那么像网络请求这样的异步操作是如何与Redux一起工作的呢？在这里，中庸之道就派上用场了。如前所述，reduce是编写所有执行逻辑的地方，reduce与执行它的人无关，与它花费了多少时间无关，也与在调度操作之前和之后记录应用程序的状态无关。
在这种情况下，Redux中间件功能提供了一个媒介，可以在它们到达reducer之前与分派的动作进行交互。可以通过编写高阶函数(返回另一个函数的函数)来创建定制的中间件函数，这些函数封装了一些逻辑。可以将多个中间件组合在一起以添加新功能，而且每个中间件都不需要知道之前和之后发生了什么，你可以想象中间件介于调度的动作和reducer之间。
通常情况下，中间件用于处理应用程序中的异步操作。Redux提供了一个名为applyMiddleware的API，它允许我们使用定制中间件以及Redux中间件，比如Redux -thunk和Redux –promise，它将中间件应用于存储，使用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));

文章图片
中间件允许你编写一个返回函数而不是动作对象的动作调度程序。下面是同样的例子：

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

条件分派可以在中间件中编写，每个中间件接收store的分派，以便它们可以分派新的操作，而getState函数作为参数，以便它们可以访问当前状态并返回一个函数，内部函数的任何返回值都可以作为分派函数本身的值使用。
下面是中间件的语法：

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

getState函数用于根据当前状态决定是获取新数据还是返回缓存结果。
让我们来看一个定制中间件日志记录器功能的示例，它只记录操作和新状态。

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', getState()); return returnVal; } }

现在，通过编写以下代码将日志记录器中间件应用于存储：

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

使用下面的代码来分派一个动作来检查分派的动作和新的状态：

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

【redux中间件 – Redux教程】下面给出了另一个中间件示例，你可以在其中处理何时显示或隐藏加载程序。这个中间件在你请求任何资源时显示加载程序，并在完成资源请求时隐藏它。

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) );