在 React/Redux 多页面应用程序中将页面的初始配置数据放在哪里？答案

【问题标题】：Where to put initial configuration data of a page in React/Redux multi-page app?在 React/Redux 多页面应用程序中将页面的初始配置数据放在哪里？
【发布时间】：2018-03-07 12:57:46
【问题描述】：

React/Redux 多页面应用中页面的初始配置数据放在哪里？

问题最初有短语“从不更改数据”而不是“页面的初始配置数据”。前者是我在谷歌搜索答案时使用的词。现在重新措辞，因为“永不改变”意味着恒定，数据不是，即使在单个页面查看期间没有改变。初始数据来自后端数据库。在我们的例子中，它被注入到 JSP 中，但它可以被 ajax 加载到非 JSP 应用程序中。

我们的案例在这里进一步说明了这一点：

我们有一个使用 JSP 生成 HTML 和纯 jQuery JavaScript 的 Java Spring 服务器。该设置正在慢慢更新以使用 React/Redux。每个页面都是一个独立的 React 应用程序，以便更轻松地转换。

在其中一个页面中，我们显示了一个表格和 2 个搜索过滤器。搜索过滤器是一个对象下拉列表（id、name 对）和一个日期选择器。对象作为列表从底层数据库加载。它们在单个页面查看期间永远不会改变。

我们将一些初始配置数据注入到 JSP 页面中，React 应用通过window.config = {} 使用这些数据，例如window.config.language = "en"。

目前我们通过 ajax 加载这些下拉列表对象并将它们放入 Redux 存储中。但是，它们在初始加载后永远不会改变。因此，我们认为最好将它们直接注入到 JSP 中，因为我们在那里有配置数据的位置 (window.config.droplistObjects = [])

除了一些配置项（语言）和一些特定于组件的临时状态外，几乎我们所有的页面状态都在 Redux 中。所有其他数据都是通过 ajax 加载的。

想到几个地方：

Redux 商店
React 主要组件
像window.config.droplistObjects = []这样的全局变量
别处

【问题讨论】：

您可以创建一个常量文件并将该数据导出为数组或对象，然后将其导入组件内部并使用它。
是的。真正的应用程序使用国家以外的其他东西。所以 contants 文件是不可能的。我将重新审视这个问题以反映这一点。
固定数据会永远来自数据库吗？有多大？
数量在 20-50 个项目的范围内，并且始终来自数据库。我在这里寻找比针对特定案例本身的解决方案更通用的解决方案/共识。我们以后可能会遇到各种情况，我想在采取某种方式之前得到一个很好的了解。我用谷歌搜索了这个主题，但没有找到一种存储永不更改数据的通用方法。
我不明白你为什么说“常量文件是不可能的”。这将是显而易见的解决方案。

标签： reactjs redux react-redux

【解决方案1】：

我认为您可能想多了：您已经在做的事情对我来说似乎很好。这就是我看到这个工作的方式：

在 Redux 操作中从 db 获取数据
reducer 更新状态
容器组件将更新状态传递给哑组件
视图已更新

我认为这没有任何问题。我已经使用这种基本结构编写了至少 4 个不同的应用程序，其中一些使用 Firebase，还有一些使用 ruby 后端。

我不确定这是否能回答您的问题，但我希望它可以帮助您退后一步，更清楚地了解情况。

【讨论】：

谢谢，感谢您的回答，我认为您可能是对的。我发布这个问题是因为我们的项目成员对存储初始数据的位置有不同的看法。我自己还没有强烈的意见，所以为社区汲取智慧似乎是个好主意。我会等几周看看是否会出现替代解决方案。