如何使用 grpc-web 构建 react-redux 应用程序？

Posted 2023-02-19

【中文标题】如何使用 grpc-web 构建 react-redux 应用程序？

【英文标题】：How to architect a react-redux app with grpc-web?

【发布时间】：2020-04-23 11:22:12

【问题描述】：

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

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

API 模块 - 对 grpc-web 客户端的承诺包装器 Redux thunks 级别 - 处理 API 的异步操作创建者 React components props - 只会询问组件需要什么

所以components对grpc一无所知，他们与动作创建者混在一起，动作创建者对grpc一无所知，他们处理api模块，只有api模块与grpc-web stubbs一起使用.

我想走这条路的原因：

动作创建器和组件中没有特定于 grpc 的代码 我的基于 Promise 的 API 而不是 grpc-web 的基于回调的 API

我的问题是：

在 Redux 和 grpc-web 之间有一个抽象级别是个好主意吗？还是将这些内容保留在动作创建者逻辑中会更好？ 有没有我应该想到的通用设计模式？ （我在考虑“适配器”） 承诺grpc-web API 是个好主意吗？如果是，编写一个函数并在运行中执行它是一个好主意吗？ 我可以说我目前的计划是适配器模式吗？ 如果我想使用适配器模式，我是否必须将数据收集的每个元素映射到我自己的接口？我知道我的组件（也许还有 action-creators）不应该依赖于 grpc-web API，因为这个 API 将来可能会改变

【参考方案1】：

我在 redux thunk 上使用 grpc-web，下面的示例代码来自 action creator：

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);
);

;