简介
reduxboilergen 是一款基于 Redux 和 React 的应用程序脚手架生成器，它可以帮助我们快速生成一个现代化的 Redux 应用程序，简化我们的开发流程。本文将为大家介绍如何使用这款 npm 包，以及使用 reduxboilergen 来快速构建一个 Redux 应用程序。
安装
在使用 reduxboilergen 之前，您需要安装 Node.js 和 npm 包管理器。在安装好 Node.js 和 npm 后，可以通过以下命令安装 redux-boiler-gen 包：
--- ------- -- ----------------
使用
要使用 reduxboilergen，只需在终端中运行以下命令：
---------------- ------ -- ------ --- ------- --- -----
其中，"my-app" 是您想要创建的应用程序的名称。命令将运行 reduxboilergen 并在当前目录中创建一个名为 my-app 的新项目。然后，我们进入到 my-app 目录，并使用 npm 安装所需的依赖项。最后，使用 npm start 命令启动开发服务器。
项目结构
在创建完项目后，我们可以看到它的目录结构如下：
------- --- ---- - --- -------- - --- ----------- - --- ---------- - --- ----------- - --- --------- - --- ------ - --- ------ - --- -------- --- -------- --- ---------- --- ------------ --- --------- --- -----------------
其中，src/ 目录下包含了应用程序的组件、actions、reducers、容器和常量等。index.js 文件是应用程序的入口点，而 App.js 文件包含应用程序的主要组件。
示例
接下来，我们将使用 npx 命令来创建一个名为 "my-redux-app" 的新项目，并启动开发服务器。
--- ---------------- ------------ -- ------------ --- ------- --- -----
接着，我们在我们的应用程序中创建一个名为 "Counter" 的计数器组件，让我们尝试在用户单击 "+1" 按钮时增加计数器的值。在 src/components 目录下，创建一个新文件 Counter.js 并添加以下代码：
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -------------
----- ------- ------- --------------- -
-------- -
------ -
-----
---------------------------
------- ----------- -- -----------------------------------
------
--
-
-
----- --------------- - ------- -- -
------ -
------ -----------
--
--
------ ------- ------------------------ - --------- ------------在 componentDidMount() 方法被调用时，我们向 store 注册了一个监听器，以便在状态更改时更新 UI。然后，我们在 render() 方法中返回了一个简单的 UI ，并使用了 connect() 函数来连接计数器组件与 Redux store。在 mapDispatchToProps() 方法中，我们将 increment() 操作添加到 props 中，并在单击按钮时调用它。
接着，我们需要在 src/actions/actions.js 文件中添加一个新的 increment() 操作。它会创建一个名为 "INCREMENT" 的 action 并将其传递给 reducers 处理。
----- --------- - -- -- -
------ -
----- -----------
--
--
------ - --------- --最后，在 src/reducers/reducers.js 文件中，我们需要处理 "INCREMENT" 操作并递增状态中的 count 值。
----- ------------ - -
------ -
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------ -
------ -
---------
------ ----------- - -
--
-
--------
------ ------
-
--
------ ------- ------------现在，我们就可以在应用程序中使用 Counter 组件了。我们可以像下面这样在 App.js 中引入它：
------ ----- ---- --------
------ - -------- - ---- --------------
------ ------- ---- -----------------------
------ ----- ---- ----------
----- --- ------- --------------- -
-------- -
------ -
--------- --------------
-------- --
-----------
--
-
-
------ ------- ----至此，我们已经成功地添加了一个计数器组件并与 Redux store 进行了连接。现在，您可以运行 npm start 命令启动开发服务器，并在 http://localhost:8080/ 网址上查看运行效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700ee361a36e0bce8d1b