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

redux中间件 – Redux教程

文章图片
中间件允许你编写一个返回函数而不是动作对象的动作调度程序。下面是同样的例子:
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) );

    推荐阅读