在该系列的第二篇文章中，我们将增强对Redux的理解，并在我们已经知道的基础上。我们将首先创建一个现实的Redux应用程序（联系人列表），该应用程序比基本计数器更复杂。这将有助于您加强对我在上一个教程中介绍的单个商店和多个还原概念的理解。然后，稍后，我们将讨论将您的Redux状态通过React应用程序和您在从头开始创建项目时应考虑的最佳实践的绑定。
但是，如果您尚未阅读第一篇文章，就可以了 - 只要您知道Redux基础知识，您仍然应该能够跟进。该教程的代码在存储库中可用，您可以将其用作起点。
我们将构建具有以下功能的基本联系列表：
这是我们的应用程序的样子：
一口气覆盖所有内容都是艰难的。因此，在这篇文章中，我们将重点关注添加新联系人并显示新添加的联系人的Redux部分。从Redux的角度来看，我们将初始化状态，创建商店，添加还原器和动作等。
在下一个教程中，我们将学习如何从React前端连接React，Redux和Dispatch Redux动作。在最后一部分中，我们将把重点转向使用Redux进行API调用。这包括从服务器中获取联系人并在添加新联系人时提出服务器请求。除此之外，我们还将创建一个搜索栏功能，可让您搜索所有现有的联系人。
您可以从我的GitHub存储库下载React-Redux演示应用程序。克隆回购，并使用V1分支作为起点。 V1分支与Create-React-App模板非常相似。唯一的区别是，我添加了一些空目录来组织Redux。这是目录结构。
。<br> ├─..pand.json<br> ├ - 公共<br>├├前<br>├ - src<br> ││├─-动作<br>│├├─papp.js<br>组件<br>││├├-容器<br>│├├─Index.js<br> │├├─..-还原器<br>│└└└-商店<br>└ - YARN.LOCK<br>
另外，您可以从头开始创建一个新项目。无论哪种方式，您都需要安装基本的React样板和Redux，然后才能开始。
首先有一个状态树的粗略草图是一个好主意。我认为，从长远来看，这将为您节省很多时间。这是可能状态树的粗略草图。
const initialstate = {<br> 联系人：{<br> 联络列表：[]，<br> newContact：{<br> 姓名： ''，<br> 姓： ''，<br> 电子邮件： ''，<br> 地址： ''，<br> 电话： ''<br> }，，<br> UI：{<br> //此处所有与UI相关的状态。例如：隐藏/显示模式，<br> //切换复选框等。<br> }<br> }<br> }<br><br>我们的商店需要具有两个属性：CombinerEducers，可以使您创建多个还原器，然后将它们组合成单个还原功能。组合形成器功能可增强可读性。因此，我将把缩略器分为两个 - 一个用户挂钩，以管理您的React应用程序中的组件级状态。
本着同样的精神，Redux引入了一些不同的钩子，以使我们能够在编写最小代码时在功能组件中执行通常的任务（派遣动作，获取状态等）。这些钩子首先在React Redux 7.1中添加。例如，要派遣操作并获取状态树，Redux提供了以下钩子：
现在，有了这些钩子，我们可以重构上面的代码：
//其他进口<br><br>//导入redux挂钩<br>导入{underispatch，useelector}从'react-redux'<br><br> //从Hook返回调度函数<br>const dispatch = underispatch（）<br><br> //调用getstore（）创建商店对象<br>const Store = getStore（）;<br><br> //使用useElector获取状态树<br>const state = useselector（state => state）<br><br> //获得国家的UI分支<br>const ui = useselector（state => state.ui）<br><br> / *返回isContactformHidden返回false */<br> dispatch（togglecontactform（））;<br> / *返回isContactformHidden返回false */<br> dispatch（togglecontactform（））;<br> / *更新联系人的状态。newcontact对象 */<br> dispatch（handleinputchange（'email'，'manjunath@example.com'）<br><br>退订（）;<br>如果一切正常，则应在开发人员控制台中看到此功能。
就是这样！在开发人员控制台中，您可以看到Redux Store已记录，因此您可以在每个操作后看到它的变化。
我们为我们的出色联系列表应用程序创建了一个裸露的Redux应用程序。我们了解了还原器，将还原器分裂以使我们的应用结构清洁器以及为商店变异的撰写措施。
在帖子结束时，我们使用store.subscribe()方法订阅了商店。从技术上讲，如果您要与Redux使用React，这不是完成工作的最佳方法。有更多优化的方法可以将React前端与Redux连接起来。我们将在下一个教程中介绍这些内容。
以上是开始使用Redux：以身作则的详细内容。更多信息请关注PHP中文网其他相关文章！
