Question

我想在不触及应用程序的实际服务器API部分的情况下开发我的React / Redux应用程序。理想情况下，我会针对一组JSON文件进行开发。这样做的最佳方式或最简单的方法是什么？理想情况下使用某种插件？这是我目前的想法：

创建一个单独的API服务器，该服务器仅在开发环境中旋转，并将我的客户端应用程序指向该服务器。
在我的实际中间件服务器（Express）中进行检查，如果不在生产中，则提供JSON文件。我不喜欢这样的想法，即在更高的环境中可能会提供样本数据并且这会让人觉得很烦。

两者都有效，但感觉很乱。我不想要一个单独的“假”API服务器，因为这会产生我调用的路由可能有拼写错误或不同的可能性。如果Javascript具有适当的接口，这将缓解这一点，但仍然感觉很乱。

以下是我的环境的简要概述，它与您看到的示例略有不同，因为我将服务器端代码和客户端代码分开：

/my-cool-project
 /api (express, no clientside)
 /client-side-app-1 (react/redux)
 /client-side-app-2 (react/redux)
 /vendor (all libraries go in here so they can be shared across projects)
 /release (upon building currently everything gets bundled up and this is what gets copied to the server)

我认为这不是一个反应/减少问题，但这是我的项目第一次是90％的客户端。在.NET MVC应用程序中，我将使用构建转换通过IOC交换数据提供者，并指向我希望它指向的内容（平面文件，不同的sql数据库，Web服务等）。

Answer 1

我们公司的一些更传统的开发人员最近一直在从.NET MVC应用程序转换到react / redux，所以这就是我们为他们提供的解决方案。它只是众多可能实现中的一种。

REST API

他们首先学会了将RESTful API作为仍然使用过时的非特定API的一些API。从你提到的＆＃34; JSON文件＆＃34;我假设你走的是正确的道路，但我要仔细检查以确保API真正是RESTful。原因是您最终需要一种方法来处理POST和GET，因为您的应用程序会增加复杂性。

服务分离

下一步是将服务后端与前端完全分开，这意味着单独的服务器实例。我推荐一个简单的Node服务器，但几乎所有东西都可以。这里的关键是了解前端服务器中的环境变量。

使用环境变量，您可以导出Web应用程序的prod和dev版本，而无需将dev代码部署到生产版本，正如您正确指出的那样。有了环境变量，我们可以将其称为env，我们建议调度一个动作将其存储在商店中，因为这是一个应用程序范围的状态变量，需要进行服务调用的任何组件使用。

格式化服务电话

最后一部分是使用env来制定您的服务电话。我们使用fetch进行服务调用（强烈建议使用CORS和Cookie），并使用utilities.js文件生成＆＃34;端点URL。如果您仔细地和REST地创建API，您会注意到以下列格式创建您建议的内容非常容易：

示例

假设您的制作服务位于

const PROD_ENDPOINT = 'exampleDomain.com:8080'

以及
获取的示例路由
const sampleEndpoint = 'sample/documents'

当一个组件（有权访问env）需要获取该端点的数据时，我们会调用util函数来使用env组成URL：

function composeURL(endpoint, env) { if (env === 'prod') { return `${PROD_ENDPOINT}/${sampleEndpoint}` // note I'm using ES6 string interpolation } else { return `file://some_path_to_your_JSON_files/${sampleEndpoint}` } }

我们没有像这样使用这个composeURL函数，因为在我们的情况下，我们的环境确定了哪些托管服务而不是本地JSON文件。如果你只需要获取＆＃34;本地JSON文件＆＃34;是用于开发，我建议在您的Web应用程序中本地运行您的开发服务。直接获取本地文件会很快变得混乱。

希望这会有所帮助并祝你好运！

在Redux / React中交换样本数据有哪些技巧？

1 个答案: