在前端开发中，redux 常常被用作状态管理工具，而 redux-action-mapper-middleware 是一种通过映射器中间件来自动化生成 redux actions 及其相应的 reducers 的 npm 包。使用这个包可以大大缩短我们在编写 redux 相关代码的时间。
在本文中，我们将提供该 npm 包的详细使用教程，以及示例代码，帮助你快速了解和使用这个工具。
安装
在终端中输入以下命令进行安装：
--- ------- ------------------------------ ------
使用
redux-action-mapper-middleware 的使用非常简单，只需要将其作为一个 middleware 注入 redux 中即可。
下面是一个创建名为 example 的 reducer 的示例：
-- ---------- ------ - ---------------------- - ---- --------------------------------- ----- ---- - ---------- ----- ------------ - - ------------ -------------- -- ----- --------- - -- -- -- ----- ------------------- --- ----- --------- - -- -- -- ----- ------------------- --- ----- ------ - - ---------- ---------- -- ----- ------- - ---------------------------- ---------- -- -------------- ------ ------- --------
可以看到，我们在 reducer.js 中使用了 redux-action-mapper-middleware 模块的 createMapperMiddleware 方法以设置 createMapperMiddleware() 的第一个参数作为 action 的命名空间。这意味着我们需要为我们的所有 actions 提供一个命名空间。
然后我们将 createMapperMiddleware 作为 Middleware 添加到 Redux store 中，这样 mapper 中的所有 actions 类型将被自动添加到我们的应用程序的操作中。
示例代码
------ - ------------ ---------------- --------------- - ---- --------
------ -------------- ---- ---------------
----- -------- - -----------------
-------- ---------------
---
----- ----- - ------------
---------
----------------
-- ------------
------------------
--
--在这个例子中，我们使用 Redux createStore() 工具创建了 Redux Store，使用 combineReducers() 将多个 reducers 组合在一起。最后，通过传递 applyMiddleware()，将我们的 redux-action-mapper-middleware 添加到 Redux Store。
现在我们已经可以使用所有命名空间为 EXAMPLE 的 action，这些 actions 是由创建好的 reduce 函数自动生成的。
例如，我们可以通过调用 store.dispatch(ExampleReducer.actions.increment()) 来触发自动创建的 INCREMENT action。
结论
redux-action-mapper-middleware 是一个自动化生成 redux actions 及其相应的 reducers 的强大工具，可以帮助我们加快在编写 redux 相关代码的时间。本文向你展示了这个 npm 包的详细教程和示例代码，希望你能在你的下一个应用程序中成功使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005603e81e8991b448de6b0