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

Question

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

我有几个问题：

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

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

仅供参考：我不是要设置服务器端呈现。当您搜索参考 ReactJS 的服务器端代码时，这就是所有出现的内容。

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

Answer 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 设置使我能够将请求（POST 视频、GET csv...）从我的 React UI 发送到我的 Django 服务器。 您不能在您的应用和服务器之间设置一些 REST 调用吗？

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

Call server-side function from ReactJS component

node.js

stripe-payments

reactjs