简介
redux-handler-middleware 是一个方便的 redux 中间件工具，它可以帮助我们简化编写 redux 异步 action 的代码。它调用了 redux-thunk 的功能，同时提供了一些额外的功能。
在这篇文章中，我们将学习如何使用 redux-handler-middleware。
安装
在使用 redux-handler-middleware 之前，我们需要通过 npm 安装它:
--- ------- ------ ------------------------
引入 redux-handler-middleware
我们需要在 Redux createStore 的时候引入 redux-handler-middleware。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ - ---------------------- - ---- --------------------------- ----- ----- - ------------ -------- ---------------------- ----------------------- --
使用
简单的异步 action
我们可以使用 redux-handler-middleware 来简化编写 redux 异步 action 的代码。
------ - ------------ - ---- --------------------------- ------ ----- -------- - -------------- ----- ------------- ------- ------ --------- -------- ---
我们可以像其他 action 一样使用它。
---------------------
异步 action 的处理
当我们进行异步请求时，通常我们需要在请求开始和请求结束时改变 state。我们可以使用 redux-handler-middleware 来简化这个过程。在 createAction 的时候，我们可以指定 onSuccess 或者 onError 来处理响应。这些函数需要返回一个包含需要更新的 state 的对象。下面是一个例子。
------ - ------------ - ---- --------------------------- ------ ----- -------- - -------------- ----- ------------- ------- ------ --------- --------- -------- ------- ------ -- -- --------- ----- --- ---------- ------- --------- -- -- --------- ------ ------------- -- ---
当我们调用这个 action 时，如果请求成功，它会将 response.data 添加到 state.users，如果失败，它会将 error 添加到 state.error。
带参数的异步请求
我们可以传递参数到异步 action 中。
------ - ------------ - ---- --------------------------- ------ ----- -------- - -------------- ----- ------------- ------- ------ --------- ------------- ------- ------- ---------- ------- --------- - -- -- -- -- --------- ----- ------------- -- --- ------------------- --- - ----
在这个例子中，我们使用了 :id 指定了 endpoint，同时通过 params 属性指定了传递给 endpoint 的参数的名称。在成功响应时，我们将 response.data 添加到 state[id] 中。
命名空间
当我们编写一个大型的应用时，我们可能会有很多的 action。我们可以使用命名空间来管理它们。
------ - ------------- ------------- - ---- --------------------------- ------ ----- ----------- - --------------------- - ------- - ------- ------- --------- -------- -- ----- - ------- ------ --------- ------------- ------- ------ - --- --------------------------- --- - ----
在这个例子中，我们使用 createActions 函数来创建名为 user 的命名空间，然后通过传递 action 的配置对象来创建了两个 action：create 和 load。因为这两个 action 都与用户相关，所以它们被归类到了 user 的命名空间中。
总结
在这篇文章中，我们学习了如何使用 redux-handler-middleware 简化编写 redux 异步 action 的代码，以及如何利用它来处理异步请求、传递参数和管理命名空间。
在实际开发中，redux-handler-middleware 可以为我们提供很多方便的功能，帮助我们编写更简洁、高效的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005622b81e8991b448df808