如何用grpc构建一个react应用程序？

Question

我有一个react-redux应用程序，我的团队使用grpc-web。我在想-设计这样的系统最好的方法是什么？

目前的计划是创建3个抽象级别：

1. API模块- grpc-web客户端的包装器
2. Redux thunks级别--处理API的异步操作创建者
3. React components props -将只要求哪些组件需要

所以components对grpc一无所知，他们和动作创建者打交道，动作创建者对grpc一无所知，他们处理api模块，只有api模块使用grpc-web stubbs。

我想走这条路的原因：

• 在操作创建者和组件中没有特定于grpc的代码。
• 我承诺的基于API而不是grpc-web的基于回调的API。

我的问题是：

1. 在Redux和grpc之间设置一个抽象级别是个好主意吗？还是把这些东西留在行动创造者的逻辑里更好？
2. 有没有一个我应该考虑的共同的设计模式？(我在考虑“适配器”)
3. 推广grpc-web API是个好主意吗？如果是的话，编写一个函数并立即执行它是个好主意吗？
4. 我可以说我目前的计划是适配器模式吗？
5. 如果我想使用Adapter模式，是否必须将数据收集的每个元素映射到自己的接口上？我知道我的组件(也许是动作创建者)不应该依赖于grpc-web API，因为这个API将来可能会改变。

Answer 1

我在redux thunk上使用grpc-web，下面的示例代码来自动作创建者：

export const getStudentInfo = (id) => async dispatch => {

const request = new StudentRequest();
request.setId("555");
var metadata = { 'token': 'value1' };
var URL = "https://localhost:5001";
var client = new StudentClient(URL);
var call = client.getStudentInformation(request, metadata, function (err, response) {

    if (err) {
        console.log(err.code);
        console.log(err.message);
    } else {
        dispatch({ type: STUDENT_INFO, payload: response.getMessage() })
    }
});
call.on('status', function (status) {
    //console.log(status.details);
});

};

Answer 2

IMHO，你用哪种技术在网络上编码数据并不重要，把它封装在应用程序中的某种服务中是个好主意。所以回答你的问题：

在Redux和grpc之间设置一个抽象级别是个好主意吗？还是把这些东西留在行动创造者的逻辑里更好？

是，将Redux特定信息与网络细节分离无疑是一个好主意。这样，如果您的团队决定将grpc更改为其他技术，您只需更改服务的代码(但实际上在我的职业生涯中从未发生过这种情况)。

有没有一个我应该考虑的共同的设计模式？(我在考虑“适配器”)

推广grpc是个好主意吗？如果是的话，编写一个函数并立即执行它是个好主意吗？

我不确定您在这里所说的“动态”是什么，但我想代码应该如下所示：

// client should probably exist in only instance, right? Consider using DI container for that
var client = new GreeterClient('http://' + window.location.hostname + ':8080', null, null);

// simple unary call
class ApiAbstractionService {
    construct(client) {
        this.client = client;
    }
    
    sayHello() => {
        return new Promise((resolve, reject) => {
            this.client.sayHello(request, {}, (err, response) => {
                if (err) {
                    reject(err.message);
                } else {
                    resolve(response.getMessage());
                }
            });
        })
    }
}

• 从这里采集的样本：https://github.com/grpc/grpc-web/blob/master/net/grpc/gateway/examples/helloworld/client.js#L23

我可以说我目前的计划是适配器模式吗？

适配器通常在您有2种服务时使用，例如，具有不同的接口，并且您希望将它统一起来。我个人会说-，nope，。

如果我想使用Adapter模式，是否必须将数据收集的每个元素映射到自己的接口上？我知道我的组件(可能还有动作创建者)不应该依赖grpc-web API，因为这个API将来可能会改变。

再一次--如果你不确定你选择的设计模式是否完全符合你的需求--那就不要使用它。模式应该帮助你，而不是强迫你进入你不需要的限制。