React-Redux 中的中间件 MiddleWares

在 React-Redux 应用中,我们经常会使用到一种叫做中间件 MiddleWares 的概念,它为我们提供了一种在 Redux Action 和 Reducer 之间添加额外逻辑的方式。本文将介绍 MiddleWares 的详细原理、使用方式和示例代码,希望能够帮助读者更好地理解 React-Redux 应用开发。

MiddleWares 是什么?

MiddleWares 是 Redux 应用中用来处理 Action 的函数,可以将多个 MiddleWares 序列在一起,组合成一个处理链。每个 MiddleWare 接收到一个 Action,可以对其进行一些操作,再将修改后的 Action 或一个新的 Action 传递给下一个 MiddleWare。最后,修改后的 Action 通过 Reducer 处理进入 Store。

MiddleWares 的使用

MiddleWares 可以在创建 Store 的时候传入 applyMiddleware 方法,它会将所有 MiddleWares 组成一个链。例如:

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

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

在上面的示例代码中,loggerMiddleware 是一个异步的中间件,它用来记录当前的 state 和 action,并输出到 console 控制台下。applyMiddleware 接受一个或多个 MiddleWare,返回一个加强版的 createStore 方法。

如何编写一个 MiddleWare?

一个 MiddleWare 是一个函数,它接收 Store 实例中的 dispatch 和 getState 方法作为参数,返回一个函数,这个函数接收 next 参数,表示下一个 MiddleWare 或 Reducer。下面是一个简单的 MiddleWare 示例代码:

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

在上面的代码中,我们定义了一个 myMiddleware,当它被调用时会在控制台输出当前 Action 和 State。最后,它会将结果返回给下一个 MiddleWare 或 Reducer。

使用 Multiple MiddleWares

MiddleWares 可以被组合使用,例如:

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

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

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

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

在上面的示例代码中,我们定义了两个 MiddleWares:middleware1 和 middleware2。然后,我们使用 composeMiddlewares 方法将这两个 MiddleWares 组合起来,最终传递给 createStore 方法。

MiddleWares 的作用

在 React-Redux 应用中,MiddleWares 的作用非常大,它可以帮助我们处理一些复杂的逻辑,例如:异步操作、请求拦截、响应处理等。下面是一个在 Redux 中使用 axios 处理网络请求的示例代码:

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

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

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

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

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

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

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

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

在上面的代码中,我们定义了一个 apiMiddleware,它帮助我们处理网络请求。我们可以定义一个 Action,然后使用 apiMiddleware 作为中间件,将请求发送给服务器,然后根据请求结果返回不同的 Action。这样,我们就可以在所有的组件中使用这个 Action,来获取服务器的数据了。

结论

MiddleWares 可以帮助我们解决很多复杂的问题,例如:异步操作、请求拦截、响应处理等。在 React-Redux 应用中,MiddleWares 非常重要,它为我们提供了一种在 Action 和 Reducer 之间添加额外逻辑的方式。希望本文可以帮助读者更好地理解 React-Redux 应用开发中的 MiddleWares。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671998e3ad1e889fe2319a7a