如果你正在为自己的项目寻找一个适合的 React 状态管理工具，React Redux 可能是一个不错的选择。而为了更有效率地搭建 React Redux 应用，今天我们来介绍一款名为 react_redux_starter 的 npm 包，并提供详细的使用教程。
什么是 react_redux_starter？
react_redux_starter 是一个使用 React 和 Redux 构建应用程序的最小工具包。它可以快速搭建一个带有 Redux 状态管理的 React 应用程序骨架，这在构建大型 React 应用程序时非常有用。同时，它也可以帮助新手更快地学习 Redux 的各种概念和实践。
安装 react_redux_starter
首先，你需要在你的计算机上安装 Node.js 和 npm。如果你还没有安装，可以从 Node.js 官方网站 下载。
然后，在终端中运行以下命令：
--- ------- -------------------
这将安装 react_redux_starter 并将其添加到你的项目的依赖列表中。此时，我们可以使用 react_redux_starter 轻松搭建一个 React Redux 应用程序的骨架了。
如何使用
使用脚手架创建新的应用程序
react_redux_starter 为我们提供了快捷的脚手架，可以帮助我们快速创建新的 React Redux 应用程序。
示例：
--- ------------------- ------
这会创建一个名为 my_app 的新目录，并将应用程序的基本脚手架文件和文件夹复制到该目录中。然后，我们可以在此基础上进一步开发和构建自己的应用程序。
目录结构
在完成脚手架创建后，我们的应用程序目录将看起来像这样：
------- --- ---- - --- -------- - --- ----------- - --- ---------- - --- ----------- - --- --------- - --- -------- --- ------------ --- -----------------
让我们一步步地解释各个文件夹的目的：
actions/：包含 Redux action creators。components/：包含 React 组件，用于渲染应用程序的视图。constants/：包含应用程序使用的常量。containers/：包含 React 容器组件，用于连接 Redux store 和 React 组件。reducers/：包含 Redux reducers。index.js：应用程序的主入口。package.json：npm 依赖列表。webpack.config.js：Webpack 配置文件。
运行应用程序
我们需要在本地计算机的浏览器中查看应用程序。在终端中运行以下两个命令（分别在两个不同的终端窗口中运行）：
--- --- -------------
--- --- ---------
这会启动 Webpack 编译器和 Express 服务器，并在默认浏览器中打开应用程序。应用程序现在应该在 localhost:8000 上运行。
添加新的组件
我们可以在 components/ 文件夹中添加新的 React 组件。例如，我们在 components/ 文件夹中创建了一个名为 Header.js 的文件，并编写如下代码：
------ ----- ---- --------
----- ------ - -- -- -
------ -
-----
----------- -- -- ---------
------
--
--
------ ------- -------接下来，在 containers/ 文件夹中创建一个名为 HeaderContainer.js 的文件，并编写如下代码：
------ - ------- - ---- -------------- ------ ------ ---- ----------------------- ------ ------- ------------------
这个时候我们需要把 HeaderContainer.js 组件添加到我们的应用程序中。在 components/App.js 文件中，将 <h1>Hello, Redux!</h1> 更改为 <HeaderContainer />。
现在，启动我们的应用程序，我们将看到我们新创建的 Header 组件已经显示在页面上了！
结论
React Redux 是一种非常流行的状态管理工具，非常适用于构建大规模的 React 应用程序。而 react_redux_starter 这个 npm 包可以快速搭建一个带有 Redux 状态管理的 React 应用程序骨架。通过本教程的介绍，相信大家也可以更加熟练地使用该工具了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005590881e8991b448d669a