用仓库和适配器模式来打造更优的React应用 ❤

在这篇文章中，我们将看看如何在React应用中通过函数组件和钩子来实现这些设计模式。通过本篇文章，你会学到如何使用函数组件和钩子保持React代码整洁和易维护。

构建更好的React应用：采用仓库模式和适配器模式

在现代软件开发中，保持代码干净、模块化和可测试至关重要。React，一个流行的用于构建用户界面的 JavaScript 库，鼓励采用基于组件的架构。然而，随着应用程序的增长，管理和处理数据以及 API 交互可能会变得复杂。在这种情况下，设计模式如 Repository 和 Adapter 就会派上用场。

1. 仓储模式

仓库模式将数据层抽象化，提供了一个类似集合的接口来访问领域模型对象。它位于领域层和数据映射层之间，就像内存中的领域对象集合一样。

存储库模式

适配器模式允许不兼容的接口可以一起工作。它将一个类的接口转换成客户期望的样子。这个模式经常用来让现有的类与其它类一起工作，去除了修改源代码的需要。

适配模式

首先，让我们创建一个新的 React 项目吧。如果你还没有安装 Create React App，先安装一下，并设置好你的项目。

npx create-react-app react-repo-adapter  # 创建 react-repo-adapter 项目
cd react-repo-adapter                   # 进入项目目录

将项目组织得井井有条，确保各个部分职责分明。这里有一个推荐的结构：

src/: 项目根目录  
├── adapters/: 适配器目录  
│   └── apiAdapter.js  
├── components/: 组件目录  
│   └── ItemsComponent.js  
├── repositories/: 数据仓库目录  
│   └── dataRepository.js  
├── services/: 服务目录  
│   └── apiService.js  
├── App.js: 应用入口文件  
└── index.js: 入口文件

创建一个用来管理数据操作事务的数据存储库。

src/repositories/dataRepository.js

const 数据仓库 = (apiAdapter) => ({  
    获取所有项目: async () => {  
        return await apiAdapter.获取('/items');  
    },  

    通过ID获取项目: async (id) => {  
        return await apiAdapter.获取(`/items/${id}`);  
    },  

    创建项目: async (数据) => {  
        return await apiAdapter.提交('/items', 数据);  
    },  

    更新项目: async (id, 数据) => {  
        return await apiAdapter.更新(`/items/${id}`, 数据);  
    },  

    删除项目: async (id) => {  
        return await apiAdapter.删除(`/items/${id}`);  
    }  
});  

export default 数据仓库;

创建一个用于处理HTTP请求的API适配器。

API适配器/src/apiAdapter.js

import axios from 'axios';  

/**

* 创建一个API适配器，用于封装axios请求。

* @param {string} baseURL - 基础URL
 */
const ApiAdapter = (baseURL) => {  
    const client = axios.create({  
        baseURL: baseURL  
    });  

    return {  
        /**

* 发送GET请求

* @param {string} url - 请求URL

* @returns {object} 返回响应数据
         */
        get: async (url) => {  
            const response = await client.get(url);  
            return response.data;  
        },  

        /**

* 发送POST请求

* @param {string} url - 请求URL

* @param {object} data - 发送的数据

* @returns {object} 返回响应数据
         */
        post: async (url, data) => {  
            const response = await client.post(url, data);  
            return response.data;  
        },  

        /**

* 发送PUT请求

* @param {string} url - 请求URL

* @param {object} data - 发送的数据

* @returns {object} 返回响应数据
         */
        put: async (url, data) => {  
            const response = await client.put(url, data);  
            return response.data;  
        },  

        /**

* 发送DELETE请求

* @param {string} url - 请求URL

* @returns {object} 返回响应数据
         */
        删除: async (url) => {  
            const response = await client.delete(url);  
            return response.data;  
        }  
    };  
};  

export default ApiAdapter;

组件中仓库和适配器的使用方法

请注意，原文中的Markdown格式（如#表示的标题）已经在翻译中保留。仓库和适配器是技术组件的一部分。

现在，我们来创建一个功能组件，利用我们的仓库和适配器获取和显示数据。

src/components/ItemsComponent.js

import React, { useEffect, useState } from 'react';  
import DataRepository from '../repositories/dataRepository';  
import ApiAdapter from '../adapters/apiAdapter';  

const apiAdapter = ApiAdapter('https://api.example.com');  
const dataRepository = DataRepository(apiAdapter);  

const ItemsComponent = () => {  
    const [items, setItems] = useState([]);  

    useEffect(() => {  
        const fetchItems = async () => {  
            const data = await dataRepository.getAllItems();  
            setItems(data);  
        };  
        fetchItems();  
    }, []);  

    return (  
        <div>  
            <h1>项目</h1>  
            <ul>  
                {items.map(item => (  
                    <li key={item.id}>{item.name}</li>  
                ))}  
            </ul>  
        </div>  
    );  
};  

export default ItemsComponent;  
// 获取所有项目的组件，展示项目列表

最后一步，将你的这个组件整合到主应用组件中。

src/App.js （例如，这里的 src/App.js 是一个源代码文件路径）

import React from 'react';  
import ItemsComponent from './components/ItemsComponent';  // 显示项目列表的组件
const App = () => (  
    <div>  
        <h1>使用 React、仓库模式和适配器模式</h1>  
        <ItemsComponent />  
    </div>  
);  
export default App;

玩得开心，愉快地编码吧，React！ ❤

感谢您加入我们在平实英语社区！在您离开前！

• 记得为作者点赞并关注哦 ️👏️️
• 关注我们: X | LinkedIn | YouTube | Discord | Newsletter
• 更多平台请看: CoFeed | Differ
• 更多内容请浏览 PlainEnglish.io