Redux 源码解析之 Middleware-JavaScript中文网-JavaScript教程资源分享门户

Redux 是现在前端中应用最广泛的状态管理工具之一，而 Middleware 则是 Redux 中非常重要的一个概念。本文主要介绍 Redux Middleware 是如何工作的，以及如何编写自己的 Middleware。

Middleware 是什么？

在 Redux 中，Middleware 是一个类似于插件的概念，它可以拦截 Redux 中的 action，并进行一些额外的操作，比如打印日志、异步请求、路由跳转等等。Middleware 接收到的参数包括 Store 的 getState/dispatch 方法和 next 函数，next 函数是调用下一个 Middleware 的方法，如果当前 Middleware 是最后一个 Middleware，则 next 会直接调用 reducer。

下面是一个简单的示例 Middleware：

const logger = store => next => action => {
  console.log('dispatching', action);
  const result = next(action);
  console.log('next state', store.getState());
  return result;
};

这个 Middleware 会在每次 dispatch action 时，打印当前 action 和下一个 state。

Middleware 的应用

在 Redux 中，Middleware 有很多的应用场景，在这里介绍几个常见的场景。

日志记录

在开发过程中，我们经常需要打印出 action 和 state，以便我们更好的理解应用程序的行为。这个时候，我们就可以编写一个 Middleware 来完成这个任务。

const logger = store => next => action => {
  console.log('dispatching', action);
  const result = next(action);
  console.log('next state', store.getState());
  return result;
};

当我们使用这个 Middleware 时，每次 dispatch action 的时候，都会打印出 action 和 state。

异步请求

在 Redux 中，我们通常会把异步请求放在 action 中，但是有时候我们需要在 Middleware 中进行异步操作，比如中间件发送请求并处理响应，然后触发一些 action。例如：

const API_REQUEST = 'API_REQUEST';
const API_SUCCESS = 'API_SUCCESS';
const API_FAILURE = 'API_FAILURE';

const apiMiddleware = ({ dispatch }) => next => action => {
  if (action.type !== API_REQUEST) {
    next(action);
    return;
  }

  fetch(action.url)
    .then(response => response.json())
    .then(data => {
      dispatch({ type: API_SUCCESS, data });
    })
    .catch(() => {
      dispatch({ type: API_FAILURE });
    });
};

const fetchData = url => ({ type: API_REQUEST, url });

当我们调用了 fetchData(url) 的时候，它返回的 action 包括了 url，Middleware 可以根据这个 url 发送请求并处理响应，然后触发新的 action。

路由跳转

在 React Router 中，我们希望路由和 Redux 状态完全分离，这个时候我们需要自己编写一个 Router Middleware，来处理路由跳转操作。

const routerMiddleware = history => store => next => action => {
  if (action.type === 'PUSH') {
    history.push(action.payload);
  } else if (action.type === 'REPLACE') {
    history.replace(action.payload);
  } else {
    return next(action);
  }
};

这个 Middleware 接收一个 history 对象，并根据 action 的类型来进行路由跳转操作。

编写自己的 Middleware

编写自己的 Middleware 可以帮助我们更好地理解 Redux 的工作流程，下面是一个编写 Middleware 的例子：

const timeMiddleware = store => next => action => {
  console.log('Time: ', new Date().toLocaleTimeString());
  return next(action);
}

这个 Middleware 会在每次 dispatch action 时，打印当前的时间。

总结

本文主要介绍了 Redux 中的 Middleware，Middleware 是 Redux 中非常重要的一个概念，它可以拦截 action，并进行一些额外的操作。本文还介绍了 Middleware 的应用场景，例如日志记录、异步请求、路由跳转等等。最后，我们还介绍了如何编写自己的 Middleware。希望读者通过本文能够更好地理解 Redux 中 Middleware 的工作流程。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a75054add4f0e0ff052098

Redux 源码解析之 Middleware