React Native开发中经常使用Middleware讲解

时间 2019-11-17

标签 react native 开发中经常使 middleware 讲解栏目 React 繁體版

原文原文链接

React Native开发中经常使用的Middleware

在react 或者 react-native开发中，咱们常常使用到以下几个中间件react

redux-logger
react-thunk
redux-promise-middleware

下面这张图展现了middleware的工做原理，能够好好的琢磨琢磨，理解这张图的含义git

中间件概念

为了理解中间件，让咱们站在框架做者的角度思考问题：若是要添加功能，你会在哪一个环节添加？github

Reducer：纯函数，只承担计算 State 的功能，不合适承担其余功能，也承担不了，由于理论上，纯函数不能进行读写操做。
View：与 State 一一对应，能够看做 State 的视觉层，也不合适承担其余功能。
Action：存放数据的对象，即消息的载体，只能被别人操做，本身不能进行任何操做。

想来想去，只有在发送 Action 的这个步骤，即store.dispatch()方法，能够添加功能。举例来讲，要添加日志功能，把 Action 和 State 打印出来，能够对store.dispatch进行以下改造。redux

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

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

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

中间件用法

本教程不涉及如何编写中间件，由于经常使用的中间件都有现成的，只要引用别人写好的模块便可。好比，上一节的日志中间件，就有现成的redux-logger模块。这里只介绍怎么使用中间件。promise

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()的功能加强。bash

这里有两点须要注意：app

createStore方法能够接受整个应用的初始状态做为参数，那样的话，applyMiddleware就是第三个参数了。

const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(logger)
);
复制代码

中间件的次序有讲究。

const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);
复制代码

上面代码中，applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。好比，logger就必定要放在最后，不然输出结果会不正确。框架

applyMiddlewares()

看到这里，你可能会问，applyMiddlewares这个方法究竟是干什么的？

它是 Redux 的原生方法，做用是将全部中间件组成一个数组，依次执行。下面是它的源码。

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}
  }
}
复制代码

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

在Redux框架下使用中间件的主要好处就是：方便在action中接收dispatch和getState两个参数，也就是咱们不须要在触发action时候传递这两个参数，咱们就能获取到。主要是由于react-thunk会在异步处理中默认传过来，以便于咱们在action中进一步dispatch其余的操做。

如何自定义一个中间件

其实本身写一个中间件也是简单的，下面就是自定义的thunkMiddleware

/**
 * Created by guangqiang on 2017/8/29.
 */
export default thunkMiddleware = extraArgument => {
  return ({getState, dispatch}) => next => action => {
    if (typeof action === 'function') {
      return action(getState, dispatch, extraArgument)
    }
    return next(action)
  }
}
复制代码