如何使用React Hooks创建三层应用

几年前我写过一篇文章描述如何使用React创建三层应用。本文展示了如何使用React Hooks创建相同的架构。

所涉及的三层分别是：

• UI层
• 业务层
• 数据访问层

所有这些层都将在一个管理待办事项列表的应用中展示。用户可以查看所有待办事项，也可以使用搜索功能来查找它们。

让我们开始构建应用并定义这三个层。

数据访问层

数据访问层管理与后端API的通信。它由暴露后端通信功能的API对象组成。

todoAPI对象处理获取和更改待办事项的API调用。它可能看起来像这样：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const url = "https://jsonplaceholder.typicode.com/todos";

function toJson(response) {
  return response.json();
}

function get() {
  return fetch(url).then(toJson);
}

const api = Object.freeze({
  get...

创建帐户以阅读完整故事。作者仅向Medium会员提供此故事。