node.js - 如何使用 React、Redux 和 Webpack 实现 Google API

Question

我正在尝试将谷歌日历事件添加到我的 React Redux 应用程序中。
我试过使用 googleapis 和 google-auth-library 但 webpack 抛出错误，因为 googleapis 是为运行服务器端而构建的，而 bundle.js 是从客户端引用的。所以我阅读了一些关于这些错误的论坛，它们都指向使用 Google's js client library反而。

我了解如何在 java 或 php 应用程序中实现它(我老了……35 岁；)但我是 React Redux 的新手，我正在寻找实现它的最佳方法。

我正在尝试从我的 actions.js 中的日历中获取事件。我试过包括 <script src="https://apis.google.com/js/api.js"></script>在我的 html 标题中，然后使用 actions.js 中的 gapi.load()。我还尝试创建一个 api.js 文件并使用 require('./api') 引用它。我还尝试使用来自 Node.js Quickstart guide 的 cli 命令获取 access_token，然后使用 axios 直接调用 Google API，但我得到了 403。我想我只是没有提供正确的 header ，但这无论如何都不是最佳实践。

我的问题基本上是如何在遵守 Redux 标准的同时从我的 actions.js 文件中引用 Google 的 js 客户端库？

Answer 1

通过在 HTML header 中包含官方 Google 客户端 API，您走上了正确的道路。这不太理想——如果 Google 将(浏览器)客户端 API 作为您可以导入 的 npm 模块提供，那就太好了。但他们没有(我看到了)，所以我认为你所做的很好。

然后是“我如何以 React/Redux 友好的方式使用它？”的问题。 Redux 是一种管理应用程序状态的机制。 Google API 不是您的应用程序的一部分(尽管您使用它执行的操作可能会告知您的应用程序的状态)。

验证您是否有权访问 Google API 很容易:您只需调用其中一个组件的 componentDidMount 方法，然后执行控制台日志:

class MyComp extends React.Component {
  componentDidMount() {
    // this is taken directly from Google documentation:
    // https://developers.google.com/api-client-library/javascript/start/start-js
    function start() {
      // 2. Initialize the JavaScript client library.
      gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        // clientId and scope are optional if auth is not required.
        'clientId': 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
        'scope': 'profile',
      }).then(function() {
        // 3. Initialize and make the API request.
        return gapi.client.request({
          'path': 'https://people.googleapis.com/v1/people/me',
        })
      }).then(function(response) {
        console.log(response.result);
      }, function(reason) {
        console.log('Error: ' + reason.result.error.message);
      });
    };
    // 1. Load the JavaScript client library.
    gapi.load('client', start);
  },
}

如果您在控制台上没有看到您期望的内容，则 gapi 没有按您期望的方式加载。如果发生这种情况，您可以提出更具体的问题!

如果您确实得到了响应，那么您现在知道如何调用 GAPI 了……但是接下来如何以 Redux 友好的方式使用它呢？

当您进行 GAPI 调用时，您可能希望以某种方式修改应用程序的状态(否则您为什么要这样做？)例如，您可能会调用身份验证流程，当 GAPI 返回成功时，您的应用程序状态现在有 loggedIn: true 或类似的(可能有很多其他状态更改)。在何处进行 GAPI 调用由您决定。如果你想在组件加载时执行它，你应该在 componentDidMount 中执行。您通常还可能会调用 GAPI 来响应用户操作，例如单击按钮。

所以典型的流程是这样的:

// either in componentDidMount, or a control handler, usually:
someGapiCall()
  .then(result => {
    this.props.onGapiThing(result.whatever)
  })

其中 this.props.onGapiThing 是一个函数，它调度一个适当的 Action ，它会修改您的应用程序状态。

我希望这个概述对您有所帮助...请随时跟进更具体的问题。