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

Question

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

1. 创建一个仅在开发环境中启动的单独 API 服务器，并将我的客户端应用程序指向该服务器。

2. 在我实际的中间件服务器 (Express) 中进行检查，如果不在生产环境中，则提供 JSON 文件。我不喜欢可能在更高环境中提供样本数据的想法，这感觉很老套。

两者都可以，但感觉很乱。我不想要一个单独的“假”API 服务器，因为这会导致我调用的路由可能有拼写错误或不同。如果 Javascript 有适当的接口(interface)，这将减轻这种情况，但仍然感觉很乱。

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

/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)

我想这并不是真正的 React/Redux 问题，但这是我的项目第一次有 90% 是客户端。在 .NET MVC 应用程序中，我会使用构建转换通过 IOC 换出数据提供程序，并指向我希望它指向的内容(平面文件、不同的 sql 数据库、web 服务等)。

Answer 1

我们公司的一些更传统的开发人员最近一直在从 .NET MVC 应用程序过渡到 React/redux，因此这是我们为他们提出的解决方案。这只是众多可能实现中的一种。

REST API

他们首先学会了制作 RESTful API，因为其中一些仍在使用陈旧的、非特定的 API。根据您提到的“JSON 文件”，我假设您走在正确的道路上，但我会仔细检查以确保 API 真正符合 RESTful。原因是随着您的应用程序变得越来越复杂，您最终将需要一种方法来处理 POST 和 GET。

服务分离

下一步是将服务后端与前端完全分离，即分离服务器实例。我推荐一个简单的节点服务器，但几乎任何东西都可以。这里的关键是了解前端服务器中的环境变量。

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

格式化服务调用

最后一部分是使用 env 来制定您的服务调用。我们使用 fetch 进行服务调用(强烈推荐它，因为它易于与 CORS 和 Cookies 一起使用)并有一个 utilities.js 文件来“生成”端点 URL .如果您仔细地以 RESTfull 方式创建 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 文件。如果您只需要获取“本地 JSON 文件”用于开发，我建议您在本地运行您的开发服务以及您的 Web 应用程序。直接获取本地文件很快就会变得困惑。

希望这对您有所帮助，祝您好运!