react中间件是什么？

react的中间件

概念：

（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。

（2）View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。

（3）Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。

所以说，只有发送 Action 的这个步骤，即store.dispatch()方法，可以添加功能。如一个打印日志的中间件：

let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}

上面代码中，对store.dispatch进行了重定义，在发送 Action 前后添加了打印功能。这就是中间件的雏形。

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

常用的中间件都有现成的，只要引用别人写好的模块即可。例：日志中间件，就有现成的redux-logger模块

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();
 
const store = createStore(
  reducer,
  applyMiddleware(logger)
);

上面代码中，redux-logger提供一个生成器createLogger，可以生成日志中间件logger。然后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。

注意：

1、createStore方法可以接受整个应用的初始状态作为参数，那样的话，applyMiddleware就是第三个参数了。

const store = createStore(
  reducer,//纯函数
  initial_state,//state的初始值，优先级最高
  applyMiddleware(logger)//中间件
);

2、中间件的次序有讲究。

const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。

3、applyMiddlewares() : 它是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。

applyMiddleware顾名思义，用于调用各种中间件；

applyMiddle

ware执行后，将所有入参中间件存入一个数组，并且返回一个闭包（闭包的概念不做累述）

闭包接受一个createStore作为入参并且执行后返回下一个闭包。

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];
 
    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);
 
    return {...store, dispatch}
  }
}

//返回将所有中间件串联存入的dispatch，执行时从右向左执行，第一次的执行结果会返回给一下个，依次类推。

上面代码中，所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。可以看到，中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法。

更多react的相关知识，请查阅 搞代码网 ！！

以上就是react中间件是什么？的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)