构建大型web应用程序可能会变得非常复杂。尤其是在应用程序中管理状态并不总是那么容易。根据用户以前的操作，我应该显示哪些按钮或字段？从何处获取当前显示的数据？在开发过程中会出现这样或那样的问题。

目前SAPUI5提供了不同的模型来存储数据（OData、JSON、XML）。这些模型使用双向绑定来更新属性和对象。但是，如果您从不同的模型获取数据，则这可能会变得复杂，因为您有控制器更新数据，但控件也可以更新数据。在这样一个不确定的系统中，重现错误或添加新特性变得越来越困难。

这可以通过使用可预测的状态容器（如Redux）来改变。Redux试图通过对更新的方式和时间施加一定的限制来预测状态突变。这些限制体现在Redux的三个原则中。Redux文档提供了一个很好的概述（只需遵循链接）。

三个原则是：

那么我们如何将这个概念集成到SAPUI5中呢？我创建了一个定制的单向模型实现（ReduxModel），它在Redux和SAPUI5应用程序之间架起了桥梁。它的工作原理与UI5 JSON模型类似，因此您可以使用相同的语法绑定属性。

安装ReduxModel:

本指南假设您按照openui5示例应用程序中的描述构建应用程序，使用Grunt和Bower管理依赖项并构建应用程序。如果您以不同的方式使用UI5，则包含新库的过程可能会有所不同。

首先，您需要安装redux模型并将其添加到bower依赖项：

请确保同时更新您正在使用的服务器的设置，以便将文件包含在resources文件夹中。

然后您可以将redux模型添加为新库SAPUI5引导标签中的附加依赖：

您还需要在应用程序的某个地方集成redux。它不包括在这个库中。您可以通过标记从CDN加载它，或者包括redux.js文件直接在应用程序的某个地方归档。默认情况下，redux作为AMD模块提供，这使得它也可以在全局变量中使用。但是，通信云，您也可以通过UI5模块系统将其包括在内。为此，您需要向UI5核心注册它。

设置模型

首先，我们需要创建一个redux存储并向其中添加一个或多个还原器。您可以在redux文档中找到更多关于这方面的信息。为redux存储创建一个单独的模块是有意义的，物联智能家居，这样您就可以在应用程序的不同部分中需要它（例如在控制器中调度操作）。在这个例子中，我还包括了redux logger中间件，它可以在控制台中看到所有redux操作的记录。

无论您在哪里设置您的模型，您都可以要求存储并实例化ReduxModel。

设置绑定

绑定的设置方式与您在SAPUI5中从其他模型中使用的方式相同。如果您有一个reducer foo，它有一个属性栏，那么您可以简单地定义一个绑定：

调度操作

因为redux模型是一个单向模型，您不能通过调用setValue或类似函数来更新绑定。您必须分派操作，然后由还原程序处理这些操作以更新状态。之后，云服务器平台，所有绑定都将被更新（如果它们已更改）。

对于本例，我们有一个控制器应用程序控制器.js它实现了一个函数handleButtonClick，云服务市场，应该触发应用程序的状态更改。

选择器

直接访问存储中的数据不是最佳做法，因为存储数据的结构不同可以在开发应用程序时轻松更改。更好的方法是使用带有定义API的选择器。

选择器也受ReduxModel支持。必须在绑定中使用特殊语法才能访问它们。所有选择器绑定必须以/selector开头。在类中定义选择器的绑定的第二部分。它将通过UI5模块系统加载。

您可以在创建ReduxModel时为所有绑定指定一个前缀作为第二个参数。

这样，您可以在定义绑定时省去前缀：

所有选择器函数将接收当前状态作为第一个参数，我的云，并将可选上下文作为第二个参数。

摘要

博客post展示了如何在SAPUI5应用程序中集成可预测的状态容器。这样，就只有一个中心位置存储了呈现应用程序所需的所有数据。这使得在应用程序中处理数据更加容易，也使得测试和问题解决更加容易。

如果您觉得这篇文章有帮助，并且ReduxModel是否可以进一步改进，请分享您的想法。