从零开始理解 Redux 中间件-JavaScript中文网-JavaScript教程资源分享门户

前言

Redux 是 React 社区最流行的状态管理库，它通过单向数据流和不可变性，简化了 React 应用的状态管理。然而，当应用规模变大时，我们经常需要更好的抽象和组织 Redux 代码。这就是 Redux 中间件的作用。本文将深入介绍 Redux 中间件的概念，以及如何使用它来改进 Redux 应用的可维护性和灵活性。

什么是 Redux 中间件

中间件是一个函数，它可以拦截 Redux 的 action，对 action 进行一些额外的操作，再传递给 reducer。通常，一个 Redux 应用可能需要多个中间件，它们可以按照一个链式结构依次拦截 action，执行各自的逻辑，并将结果传递给下一个中间件或 reducer。

对于一个 Redux 应用来说，中间件可以用来：

记录日志
发送异步请求
处理副作用
更改 action
...

当一个 action 被触发时，Redux 将其传递给第一个中间件，然后将中间件返回的结果传递给下一个中间件，直到达到 reducer。中间件也可以直接将 action 转发给 reducer，从而终止中间件链。

Redux 提供了内置的 applyMiddleware 函数，它可以接受一个或多个中间件函数，返回一个增强版的 Store。这个增强版的 Store 可以处理拦截和处理中间件推进的 action，最终生成新的状态更新。

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

const middleware = [thunk, logger];
const store = createStore(rootReducer, applyMiddleware(...middleware));

export default store;

在上面的示例代码中，我们使用了两个非常流行的中间件：thunk 和 logger。thunk 中间件允许我们在 action 中返回一个函数，而不是一个普通的对象，这样我们就可以使用异步操作，比如发送网络请求，然后在请求完成后，再发出真正的 action 更新应用状态。logger 中间件用于记录应用状态的改变，以便我们调试和追踪应用程序的运行时。

编写自己的中间件

下面是一个简单的中间件示例，它可以处理一个特殊的 type 类型的 action，将 action 中的 payload 乘以 10：

const multiplyTen = store => next => action => {
  if (action.type === 'MULTIPLY_TEN') {
    const { payload } = action;
    const newAction = { ...action, payload: payload * 10 };
    return next(newAction);
  }
  return next(action);
};

这个中间件函数接受一个 store 对象作为参数，store 包含了当前应用程序的状态、dispatch 和 subscribe 方法等。任何一个中间件都必须返回一个函数，这个函数接受 next 作为参数，next 是 Redux 内部的 dispatch 函数，用于将 action 发送给下一个中间件或 reducer。中间件函数也可以返回一个 Promise，此时可以使用 async/await 提示代码，进行异步编程。

在上面的示例中，当 action 的 type 为 'MULTIPLY_TEN' 时，我们将其 payload 值乘以 10，并创建一个新的 action 对象，再将其传递给下一个中间件或 reducer。否则，直接将原始 action 传递给下一个中间件或 reducer。注意，我们需要使用 next 函数将 action 传递给下一个中间件或 reducer，这是链式调用的关键之一。如果不使用 next 函数，将会导致应用状态受到影响，无法更新。

示例应用

为了更好地理解中间件的作用，我们可以在一个 Redux 应用中加入一个中间件，从而实现异步的网络请求。下面是一个示例应用代码，新建一个名为 asyncApp.js 的文件：

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const API_ENDPOINT = 'https://jsonplaceholder.typicode.com/todos';

const fetchTodoList = () => async dispatch => {
  dispatch({ type: 'FETCH_TODO_REQUEST' });
  try {
    const response = await fetch(API_ENDPOINT);
    const json = await response.json();
    dispatch({ type: 'FETCH_TODO_SUCCESS', payload: json });
  } catch (error) {
    dispatch({ type: 'FETCH_TODO_FAILURE', payload: error.message });
  }
};

const logger = store => next => action => {
  console.log('[LOGGER]', action.type, action.payload);
  return next(action);
};

const store = createStore(
  rootReducer,
  applyMiddleware(thunk, logger)
);

store.subscribe(() => {
  const state = store.getState();
  console.log('[STATE]', state);
});

store.dispatch(fetchTodoList());

在上面的代码中，我们写了一个异步的 action 函数 fetchTodoList，它会请求一个远程服务器，返回一列表数据到客户端。我们也编写了一个简单的 logger 中间件，用于在控制台输出 action 的类型和 payload。我们将 fetchTodoList 交给 Redux 的 store.dispatch() 方法，让 Redux 中间件将其处理成多个不同的 action（FETCH_TODO_REQUEST，FETCH_TODO_SUCCESS 和 FETCH_TODO_FAILURE）。每个 action 都会对应一个特定的 store 状态变化。最后，我们使用 store.subscribe() 侦听器，每次状态更新后都会在控制台输出当前的状态。

总结

本文详细介绍了 Redux 中间件的概念和其重要性。它们不仅可以帮助我们处理诸如异步请求和日志记录等副作用，还可以帮助我们更好地组织应用程序的状态管理。通过中间件，我们可以拦截、处理和转换 action，从而更精细地控制 Redux 应用的行为。希望这篇文章能够帮助你更深入地了解 Redux 中间件，并开发出更好的应用程序。

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