node.js - 从 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 设置使我能够从 React UI 向 Django 服务器发送请求(POST 视频、GET csv...)。 您不能在应用程序和服务器之间设置一些 REST 调用吗？