从 ReactJS 组件调用服务器端函数答案

【问题标题】：Call server-side function from ReactJS component从 ReactJS 组件调用服务器端函数
【发布时间】：2017-04-10 22:01:07
【问题描述】：

我正在尝试在我的 ReactJS 应用程序中实现一个需要服务器端代码的支付系统。

我有几个问题：

如何连接 ReactJS 应用程序以便它可以与服务器端代码进行通信？
如何在服务器端代码中设置函数？
如何从 ReactJS 应用中的组件调用该函数？

作为参考，我正在尝试整合Stripe subscriptions。他们提供了 Node、PHP 等的服务器端代码示例。

仅供参考：我不想设置服务器端渲染。当您搜索参考 ReactJS 的服务器端代码时，就会出现这样的情况。

编辑：我对 NodeJS 解决方案特别感兴趣。我也在使用 Webpack。

【问题讨论】：

标签： node.js reactjs stripe-payments

【解决方案1】：

以防万一，它对您有帮助...我有一个 React UI，可以在 Django 后端触发视频处理（我主要通过 Apollo Client 使用 GraphQL 在涉及文件传输时触发我的服务器端功能和 REST 框架）。 Is REST an option for you?

我用于文件传输的中间件例如：

const SERVER_URL = process.env.SERVER_URL;

const fileTransferApi = (payload) => {
  const { authenticated, token, endpoint, body, contentType, method } = payload;

  let config = {};

  if (authenticated) {
    if (token) {
      config = {
        method,
        headers: {
          'Content-Type': contentType,
          Authorization: `Bearer ${token}`
        },
        body
      };
    } else {
      throw new Error('No token saved!');
    }
  }

  return fetch(`${SERVER_URL}/api/rest/v1/${endpoint}`, config)
    .then((response) =>
      response.text().then((text) => ({ text, response }))
    ).then(({ text, response }) => {
      if (!response.ok) {
        return Promise.reject(text);
      }
      return text;
    }).catch((err) => console.log(err));
};


export const FILE_TRANSFER_API = Symbol('FILE_TRANSFER_API');

export default () => (next) => (action) => {
  const fileTransferApiAction = action[FILE_TRANSFER_API];

  if (typeof fileTransferApiAction === 'undefined') {
    return next(action);
  }

  const { payload, types } = fileTransferApiAction;

  const [, successType, errorType] = types;

  return fileTransferApi(payload).then(
    (response) =>
      next({
        type: successType,
        payload: {
          text: response,
          message: 'ok'
        }
      }),
    (error) => next({
      type: errorType,
      payload: {
        error: error.message || 'There was an error.'
      }
    })
  );
};

我的商店（我使用 Redux）：

import { createStore, compose, applyMiddleware } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import ReduxThunk from 'redux-thunk';
import ApolloClientSingleton from '../network/apollo-client-singleton';
import fileTransferApi from '../middlewares/fileTransferApi';

import reducer from './reducers';

export default class Store {
  constructor(history, initialState = {}) {
    this.data = createStore(
      reducer,
      initialState,
      compose(
        applyMiddleware(
          fileTransferApi,
          ReduxThunk.withExtraArgument(ApolloClientSingleton),
          routerMiddleware(history),
          ApolloClientSingleton.middleware()
        ),
        typeof window === 'object' && typeof window.devToolsExtension !== 'undefined'
          ? window.devToolsExtension() : (f) => f
      )
    );
  }
}

在我的行动中：

export const windowsDownload = (authenticated, token) => ({
  [FILE_TRANSFER_API]: {
    types: [WINDOW_DOWNLOAD_REQUEST, WINDOW_DOWNLOAD_SUCCESS, WINDOW_DOWNLOAD_FAILURE],
    payload: {
      endpoint: 'file_transfer/download/windows',
      contentType: 'text/csv',
      method: 'get',
      body: null,
      authenticated,
      token
    }
  }
});

此 REST 设置使我能够从我的 React UI 向我的 Django 服务器发送请求（POST 视频、GET csv...）。 您不能在您的应用和服务器之间设置一些 REST 调用吗？

【讨论】：

我正在研究与您的答案类似的实现——我几乎还没有解决所有问题，但我认为将您的答案称为正确答案是安全的。 REST 解决方案似乎是要走的路。我一直缺少的部分是服务器部分。我只需要设置服务器，以便可以调用它，然后您的解决方案应该可以正常工作。谢谢！