Redux 学习笔记:中间件 Middlewares 的原理和使用

阅读时长 6 分钟读完

在 Redux 中,中间件(middlewares)是一种可以增强 store.dispatch 功能的机制。它可以在 action 发起之后,到达 reducer 之前,执行一些自定义的扩展逻辑,例如日志记录、异步处理、埋点等。

本文将介绍 Redux 中间件的原理和使用方法,包括如何创建、使用和定制一个中间件。

中间件的原理

在 Redux 中,中间件是一种函数,它的参数包括 store.dispatch 和 store.getState,返回值也是一个函数。这个函数接收一个 next 参数,表示将要执行的下一个中间件函数,它必须返回一个接收 action 参数的函数,这个函数叫做“增强版”dispatch。

例如,下面是一个最简单的中间件:

这个中间件用于在控制台输出 action 和当前 state 信息。它接收一个 store 参数,返回一个函数,这个函数接收一个 next 参数,返回一个“增强版”dispatch。

下面是使用这个中间件的方法,在创建 store 时,使用 applyMiddleware 函数,将中间件函数传入:

applyMiddleware 的实现方式类似于 compose 函数,它通过将所有中间件函数从右到左依次执行,最后传入原始的 store.dispatch,将多个增强版 dispatch“串联”起来,形成一个新的 dispatch 函数。

中间件的使用

使用中间件的好处是,可以实现一些通用的功能,例如日志记录、全局异常处理、异步处理等,而不需要在每个 action 中都写一遍逻辑。

举个例子,下面是一个用于处理异步请求的中间件:

这个中间件的逻辑是,如果一个 action 是一个函数,它会把 store.dispatch 和 store.getState 传递给这个函数,让它执行异步请求,然后再将结果作为新的 action 发起。如果不是一个函数,则直接调用下一个中间件。

下面是一个例子,使用 Redux Thunk 中间件处理异步请求:

-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ ----- ---- -------------
------ ----------- ---- ------------------

----- ----- - ------------
  ------------
  ----------------------
-

----- --------- - -- -- ---------- --------- -- -
  -- ----
  ---------- ----- ------------------ --
  ------------------
    -------------- -- -
      -- ----
      ---------- ----- --------------------- -------- -------- --
    --
    ------------ -- -
      -- ----
      ---------- ----- --------------------- ------ ------------- --
    --
-

---------------------------

这个例子里,fetchUser 是一个返回函数的 action,它需要在异步请求成功或失败后,再发起一个新的 action。使用 Redux Thunk 中间件,就可以在 fetchUser 函数里面执行异步请求,并在结果回来后,自动发起新的 action。

定制中间件

除了使用 Redux 提供的中间件库(例如 Thunk、Logger),我们还可以自己编写中间件。

编写中间件需要遵守一些约定:

  • 中间件是一个高阶函数,它需要返回一个接收 next 参数的函数。
  • 中间件需要接收 store 参数。
  • 中间件需要返回一个函数,这个函数接收 action 参数,返回值会被返回给下一个中间件或 reducer。
  • 中间件可以在这个函数里面,自定义逻辑,例如修改 action、执行异步操作、捕获错误等。

下面是一个示例,实现了一个用于埋点的中间件:

-- -------------------- ---- -------
----- --------------- - ------------ -- ------- -- ------ -- -------- -- -
  -- ------------ -- ------------------ -
    ----- --------- - -----------------
    --------------------- -------
  -
  ------ ------------
-

----- ----- - ------------
  ---------
  --------------------------------------------
-

这个中间件用于在 action 上,增加一个 meta 属性,这个属性里面包含要埋点的信息,然后在执行 action 时,调用 trackEvent 函数记录这个信息。这个中间件使用了闭包,将 trackEvent 参数传递进来,用于实际埋点的逻辑实现。

总结

Redux 中间件是一种强大的扩展机制,它可以在 store.dispatch 和 reducer 之间,添加一些自定义的逻辑,实现全局性的功能,例如日志记录、全局异常处理、异步请求处理等。

使用中间件需要遵守一些约定,编写中间件需要了解函数式编程、高阶函数和闭包等概念。在实际项目开发中,可以使用 Redux 提供的中间件库,也可以自己编写中间件,以应对特定场景的需求。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64801c8348841e9894f9bddb

纠错
反馈