一韬的React实验室

是时候来优化一下我们的代码了。前面的文章提到过：重复代码是混乱的根源！，本篇文章我们来继续消灭重复代码。

完成一个页面来展现数据库中记录的用户。

你想要的代码在这里

上一篇实现的表单验证里，所有的验证代码都是耦合在组件中的，没有办法实现复用。重复代码是混乱的根源！既然我们用了React，那我们是不是可以用组件化的方式去给表单验证这些逻辑解耦呢

在前面两篇文章中，我们通过一个简单的计数器例子介绍了Redux的基本概念和用法。在计数器这个例子中，当store的数据更新时，UI就会相应地被更新，这是由于我们使用了store.subscribe方法在触发了action的时候执行了setCount方法来更新UI。在React的思想中，视图的变化对应的是数据的变化，data -> ui，这里的data可以是组件的新state，或者接收到的新props

背景之前曾打算写一部“从零开始做一个笑话APP”的React入门系列文章，但是遇到了一些问题：一个完整的App需要去构思App的：产品功能逻辑过程UI设计还要去完成App需要调用的接口。而这一些工作本并不属于前端的范畴，虽然了解这些在进入工作岗位后能够有所帮助，但是对于初学者来说，首要任务还是集中注意力抓住前端的知识点去做突破。我们不是产品经理，我们不是UI设计，想做一个前端，just coding!

前面的文章中使用了最原始的写法（基于state的状态管理）来完成了一个管理系统。接下来准备给我们的系统引入Redux

Redux进阶：使用Redux中间件异步触发action

我们的管理系统已经有了图书、用户的增删改查以及登录功能了，可谓是五脏俱全，就是丑了点~ 是不是已经有些厌倦我们系统里的白底黑字和灰色框框了？打起精神，本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI

盲目信任用户输入的数据，会给系统埋下不小的隐患。这回我们就来把这隐患扼杀在摇篮之中。表单验证无非就是对用户输入的数据进行有效性、非空性验证，验证失败会在相应的地方显示错误信息，并阻止用户提交表单。

开始之前你需要有一台安装好node环境（包括npm）的电脑，并且有一个趁手的代码编辑器（或IDE），如果没有，请使用Webstorm作为你的第一款（也许是最后一款）开发工具

仔细想想，我们的后台系统还没有一个登录功能，太不靠谱，赶紧把防盗门安上

前文中实现了用户添加与用户列表展示的功能，本篇带大家来完成用户的编辑与删除

我们现在的应用只有一个Hello React的页面，现在需要添加一个用于添加用户的页面。首先在/src目录下新增一个pages目录，用于存放渲染页面的组件。然后在/src/pages中新增一个UserAdd.js文件

图书管理还记得搭建项目的时候在db.json文件里写的book吗