使用 react-redux-firebase 消费云功能 - React JS答案

【问题标题】：Using react-redux-firebase to comsume cloud functions - React JS使用 react-redux-firebase 消费云功能 - React JS
【发布时间】：2020-09-23 00:17:35
【问题描述】：

我是 React JS 的新手。我正在尝试开发一个简单的网页来呈现来自云 Firestore 的数据。我正在使用react-redux-firebase 来获取数据。它工作正常。现在我希望从云函数中获取数据。我已经成功部署了云功能。我什至可以使用axios 从云函数中获取数据。但我想使用react-redux-firebase。我搜索了很多，找不到一个例子。请帮帮我。

const firebase = getFirebase();

    var animals = firebase
        .functions()
        .httpsCallable("getAllAnimals");
    animals()
        .then(result => {
            console.log("result ------------- ", result)
        })
        .catch(error => console.log('errorrrrrrrr ' + error)
        );

使用这个，我得到以下错误。

errorrrrrrrr Error: Response is missing data field.

【问题讨论】：

请编辑问题以显示您打算调用的可调用函数。请注意，您的客户端客户端专门尝试调用callable function，它应该在后端这样定义。
我不认为react-redux-firebase 是为了取代像 Axios 或 Fetch API 这样的请求库，最终你的 Cloud Function 是一个 HTTP 端点。您是否检查过它是否可以使用 Axios？您还可以共享函数代码和在反应组件中发出请求的 sn-p tha 吗？（现在功能代码好像不完整）
@Happy-Monad，谢谢。使用 Axios 我可以获取数据。但我想在某一时刻集中我的数据。那就是我想使用 react-redux-firebase。

标签： reactjs firebase redux google-cloud-functions react-redux-firebase

【解决方案1】：

我认为这里有两个不同的东西，库react-reduc-firebase 和集中状态。

正如您在 cmets 中所说，您可以使用 Axios 等请求库查询 HTTP 云函数，但我知道您还想通过 react-redux-firebase 查询云函数。但是，该库不适用于查询任意 HTTP 端点，例如此函数或任何其他 HTTP 可访问 API。相反，该库旨在成为一个舒适且开箱即用的界面，可以与拥有自己的 JS 客户端库和 API 的产品无缝交互，否则需要您自己编写所有胶水代码。在 Github 的 feature list 中找不到 Cloud Functions 的原因可能是因为没有特殊处理需要到达它们，因此没有提供接口层。

另外，我了解到您希望本着 Redux (Flux) 应用程序架构的精神集中您的数据。 IMO 您同时使用 Axios 和 Firestore 的事实并不与集中状态管理的原则相冲突，只要数据的更改和管理与 Redux core principles 一致，集中状态管理就不会知道如何获取数据。当每个数据库都有其特定的怪癖时，并非所有信息都可以通过单个过程访问，这是有道理的。

【讨论】：

【解决方案2】：

如果其他人试图通过 react-redux-firebase 使用云功能，如果可能配置，这是可能的。

在主应用的index.js 文件中，您为ReactReduxFirebaseProvider 配置firebase，请务必同时导入firebase/functions。

// src/index.js
import firebase from 'firebase/app';
import 'firebase/functions';

这将允许您将firebase.functions() 与useFirebase() 挂钩一起使用。

【讨论】：