如何构建 React 应用程序以传递从 child 的函数返回的值

Question

我正在构建一个 React 应用程序，我想将其分为三层，但在思考它们应该如何构建以及在什么层次结构中最好地支持 React 实践时遇到了一些麻烦。

三层是服务（仅 api 调用）、业务逻辑和 UI。我的目标是让服务和业务层可以重用，而不是绑定到特定的 UI 组件。

所以在我看来，我程序的结构应该是UI>（是parent的）业务逻辑>（是parent的）服务层。但是，我发现很难看出这种方法在反应中有何意义，所以我想知道这是否是正确的想法。我的问题是，据我了解，parents 将道具传递给 children。但是，我需要我的服务层将 objects 传递给我的业务逻辑，这样它就可以做这件事并有效地移交给 UI 进行显示。

这是我的服务层的修剪版本：

interface State {
    queues: any
}

@observer
class DeadletterService extends Component<Props, State> {

    @observable deadletterQueue: [];
    @observable queues: [];

    constructor(props: any) {
        super(props);
        this.state = {
            queues: []
        };

        this.queues = this.getQueues();
        this.deadletterQueue = this.getByQueue("urlSlug");
    }

    // returns all queues as a JSON array
    getQueues(): any {

        let url = "url";

        fetch(url)
            .then(res => res.json())
            .then(data => {
                return data;
            });
    }

    // given the name of a queue, returns the queue's deadletters as a JSON array
    getByQueue(id: string): any {

        let url = "url/{id}";

        fetch(url)
            .then(res => res.json())
            .then(data => {
                return data;
            });

        return 
    }

    render() {
        return (
            <div>
                <DeadletterLogic testQueues={this.queues}  /> 
            </div>
        );
    }
}

这是我的逻辑层的修剪版本：

interface Props {
    testQueues: any;
}

interface State {
    queues: any
}

@observer
class DeadletterLogic extends Component<Props, State> {

    constructor(props: any) {
        super(props);
        this.state = {
            queues: []
        };
        this.getQueues();
    }

    // here is where the business logic will be done
    getQueues() {
        // in order to gets a list of queues here, a fetch call must be made in the service layer to the MessageQueueAPI
    }

    componentDidMount() {
        // when passing from a parent, I'm not sure if this needs to live here or if it can live in getQueues to update when the fetch is finished.
        this.setState({ queues: this.props.testQueues });
    }

    render() {
        return (
            <div>
                {this.props.testQueues}
            </div>
        );
    }
}

将服务层中的 api 调用返回的值返回到 React 中的业务层的最佳方法是什么？因为它是一个异步获取调用，所以我还需要在我实际取回数据后更新我的业务层。

干杯！

Answer 1

我不确定您为什么将服务和业务层用作组件？正如你所说

My goal here is to allow the service and business layers to be reusable and not be tied to specific UI components.

这意味着它们不应与任何 UI 相关，这意味着这些层可用于 angular、react-native 或任何其他 UI 层实现。

所以你可以有 api 层（服务）：

class DeadletterService {
    async getQueues(filter) {
        const response = await fetch(...);
        return await response.json();
    }

    // other api calls
}

const service = new DeadletterService();
export default service;

如您所见，服务仅根据某些输入（例如过滤器、ID 或其他内容）请求和 return 数据（无状态）。

然后你有业务层，你可以从服务中获取数据，对数据进行任何你想要的转换，并以某种状态存储数据，这些状态将在 UI 层上使用。

import deadLetterService from './deadLetterService';

class DeadletterStore {
    @observable queues = [];

    @action
    async getQueues() {
        const queues = await deadLetterService.getQueues();
        // do some mapping if needed
        this.queues = queues;
    }
}

现在您可以在您的 UI 中使用该商店 - 因为您使用的是 MobX，所以您可以使用注入功能：

@inject('deadLetterStore');
class DeadletterPage extends React.Component {
    componentDidMount() {
        this.props.deadLetterStore.getQueues();
    }

    render() {
        return (
            <div>
                {this.props.deadLetterStore.queues.map((queue) => <span>{queue.name}</span>)}
            </div>
        )
    }
}

请注意，此代码未经测试 - 仅用于指出结构设计。

如何构建 React 应用程序以传递从 child 的函数返回的值

How to structure a React app to pass values returned from a child's function

software-design

typescript

reactjs

mobx