通过Redux存储数据的方法、装置、设备及可读存储介质与流程

本发明涉及计算机技术领域，尤其涉及一种通过redux存储数据的方法、装置、设备及可读存储介质。

背景技术：

在使用react开发页面时，会出现一个组件被多个页面复用的情况，此时需要存储组件在各个页面中的状态数据。控制这些状态数据可以借助redux，但是，redux类似于一个单例，全局只有一份，只能存储最终的状态数据，之前的状态数据会被覆盖。

此外，在现有技术中，页面和组件的业务耦合；组件通过页面请求状态数据，并将状态数据存储在redux中，后期组件再通过页面从redux中获取状态数据，以供组件进行渲染。因此，在现有技术中，存在不能通过组件自己管理状态数据的问题。

技术实现要素：

本发明实施例的主要目的在于提出一种通过redux存储数据的方法、装置、设备及可读存储介质，解决了组件不能完全复用以及组件复用后不能通过组件管理状态数据的问题。

为实现上述目的，本发明实施例提供了一种通过redux存储数据的方法，所述方法包括：

当检测到用户在组件上的操作时，所述组件判断在redux中是否存在与所述操作对应的状态数据；

在redux中不存在与所述操作对应的状态数据的情况下，所述组件从网络中获取与所述操作对应的状态数据；

所述组件根据所述操作以及调用所述组件的页面，生成对应的索引；

所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中。

可选的，所述方法还包括：

在redux中存在与所述操作对应的状态数据的情况下，从redux中获取与所述操作对应的状态数据，并根据所述状态数据在所述页面中进行渲染。

可选的，在所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中之后，所述方法还包括：

所述组件从key中获取已存储的状态数据，并根据所述状态数据在所述页面中进行渲染。

可选的，所述组件根据所述操作以及调用所述组件的页面，生成对应的索引，包括：

所述组件获取所述页面的统一资源定位符url，并根据url和产生的随机值，利用哈希算法，生成对应的哈希值；

所述组件根据预设类型表，确定出与所述操作对应的控件的类型值；

所述组件根据所述哈希值和所述类型值生成对应的索引。

可选的，所述方法还包括：

所述组件按照设定时间，定期在key中对存储的索引及对应的状态数据进行清除。

此外，为实现上述目的，本发明实施例还提出一种通过redux存储数据的装置，所述装置包括：

判断模块，用于当检测到用户在组件上的操作时，所述组件判断在redux中是否存在与所述操作对应的状态数据；

获取模块，用于在redux中不存在与所述操作对应的状态数据的情况下，所述组件从网络中获取与所述操作对应的状态数据；

生成模块，用于所述组件根据所述操作以及调用所述组件的页面，生成对应的索引；

存储模块，用于所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中。

可选的，所述生成模块，具体用于：

所述组件获取所述页面的统一资源定位符url，并根据url和产生的随机值，利用哈希算法，生成对应的哈希值；

所述组件根据预设类型表，确定出与所述操作对应的控件的类型值；

所述组件根据所述哈希值和所述类型值生成对应的索引。

可选的，所述装置还包括：

清除模块，用于所述组件按照设定时间，定期在key中对存储的索引及对应的状态数据进行清除。

此外，为实现上述目的，本发明实施例还提出一种通过redux存储数据的设备，所述设备包括：处理器、存储器及通信总线；

所述通信总线用于实现所述处理器和所述存储器之间的连接通信；

所述处理器用于执行所述存储器中存储的通过redux存储数据的程序，以实现上述介绍的通过redux存储数据的方法的步骤。

此外，为实现上述目的，本发明实施例还提出一种计算机可读存储介质，所述计算机可读存储介质存储有通过redux存储数据的程序；

当所述通过redux存储数据的程序被至少一个处理器执行时，导致所述至少一个处理器执行上述介绍的通过redux存储数据的方法的步骤。

本发明实施例提出的通过redux存储数据的方法、装置、设备及可读存储介质，通过redux可以存储多个页面的多个状态数据；组件可以完全复用，且复用后的状态数据不会被替换，达到真正意义上的组件复用。此外，页面和组件的业务解耦，通过组件直接管理组件的状态数据。

附图说明

图1是本发明第一实施例的通过redux存储数据的方法的流程图；

图2是本发明第一实施例中的筛选组件示意图；

图3是本发明第一实施例中的筛选组件所在页面的示意图；

图4是本发明第一实施例中的筛选组件所在页面的示意图；

图5是本发明第一实施例中的存储方式的示意图；

图6是本发明第二实施例的通过redux存储数据的方法的流程图；

图7是本发明第三实施例的通过redux存储数据的方法的流程图；

图8是本发明第四实施例的通过redux存储数据的装置的组成结构示意图；

图9是本发明第五实施例的通过redux存储数据的设备的组成结构示意图。

具体实施方式

为更进一步阐述本发明实施例为达成预定目的所采取的技术手段及功效，以下结合附图及较佳实施例，对本发明实施例进行详细说明如后。

本发明第一实施例，提出了一种通过redux存储数据的方法，如图1所示，所述方法具体包括以下步骤：

步骤s101：当检测到用户在组件上的操作时，所述组件判断在redux中是否存在与所述操作对应的状态数据；

步骤s102：在redux中不存在与所述操作对应的状态数据的情况下，所述组件从网络中获取与所述操作对应的状态数据；

步骤s103：所述组件根据所述操作以及调用所述组件的页面，生成对应的索引；

步骤s104：所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中。

具体的，在步骤s101之前，所述方法还包括：

在redux中设置与组件对应的key，以通过所述key存储调用所述组件的各个页面的各个状态数据。

在现有技术中，redux是一种javascript框架，为应用程序提供一个可预测的状态容器。针对一个组件，在redux中分别设置多个与调用该组件的页面对应的key，并通过各个页面的key存储组件在对应页面中的最终状态数据。而在本发明实施例中，针对一个组件，在redux中设置与该组件对应的key，并通过该key存储调用该组件的各个页面的各个状态数据。

进一步的，所述用户在组件上的操作，包括：用户在组件的控件上的操作。

例如，如图2所示，为筛选组件示意图，该筛选组件包括四个控件：终端用户、终端标识、终端分支和终端版本。每个控件都包含多个筛选项，且筛选项是级联筛选。组件需要存储与每个筛选项对应的状态数据，以当用户选择一个筛选项时，可以加载与该筛选项对应的状态数据，并在页面中进行渲染。但是在使用redux时，由于redux是个单例，现有技术会存在以下问题：1)由于级联筛选的接口只有一个，当用户需要选择不同的筛选项时，都要进行网络请求，然而redux只能存储最后一次选择的筛选项所对应的状态数据，不能保留之前选择的筛选项对应的状态数据，因此在页面中只能根据最后一次选择的筛选项对应的状态数据进行渲染；比如最后一次用户是从终端版本控件中选择8.7.0，那么redux中的key就存储的是版本8.7.0的内容；2)当用户在如图4所示的页面中进行了筛选后，再退回如图3所示的页面中时，图3中的页面的筛选就会被图4的数据污染，无法记录图3页面的所有筛选数据。

为了解决现有技术中的上述问题，本发明实施例在redux中存储的状态数据不再使用覆盖的方式，而是如图5所示，使用追加的存储方式，将每次从网络中请求的状态数据均存储到redux中。为了区分各个状态数据，为每个状态数据添加对应的索引。所述索引是根据调用所述组件的页面以及用户在所述组件上的操作生成的。例如，在图2所示的筛选组件中，若用户的操作为：从终端分支控件的筛选项中选择出debug，则根据debug和调用该组件的页面生成索引，并将从网络中请求到的与debug对应的状态数据以及所述索引存储到redux中。当用户再次从终端分支控件中选择debug时，就可以直接从redux中找到对应的状态数据并进行加载、渲染了。

本发明第二实施例，提出了一种通过redux存储数据的方法，如图6所示，所述方法具体包括以下步骤：

步骤s601：当检测到用户在组件上的操作时，所述组件判断在redux中是否存在与所述操作对应的状态数据。

若是，则执行步骤s602；若否，则执行步骤s603。

具体的，在步骤s601之前，所述方法还包括：

在redux中设置与组件对应的key，以通过所述key存储调用所述组件的各个页面的各个状态数据。

在现有技术中，redux是一种javascript框架，为应用程序提供一个可预测的状态容器。针对一个组件，在redux中分别设置多个与调用该组件的页面对应的key，并通过各个页面的key存储组件在对应页面中的最终状态数据。而在本发明实施例中，针对一个组件，在redux中设置与该组件对应的key，并通过该key存储调用该组件的各个页面的各个状态数据。

进一步的，所述组件判断在redux中是否存在与所述操作对应的状态数据，包括：

所述组件从redux中确定出与所述组件对应的key，并判断在所述key中是否存在与所述操作对应的状态数据。

步骤s602：在redux中存在与所述操作对应的状态数据的情况下，所述组件从redux中获取与所述操作对应的状态数据，并根据所述状态数据在所述页面中进行渲染。

步骤s603：在redux中不存在与所述操作对应的状态数据的情况下，所述组件从网络中获取与所述操作对应的状态数据。

与现有技术相比，在本发明实施例中，通过redux可以存储调用组件的各个页面的每次网络请求的状态数据，等再次返回到该页面时，可以直接从redux中获取状态数据而无需从网络中获取。

步骤s604：所述组件根据所述操作以及调用所述组件的页面，生成对应的索引。

步骤s605：所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中。

步骤s606：所述组件从key中获取已存储的状态数据，并根据所述状态数据在所述页面中进行渲染。

本发明实施例在redux中存储的状态数据不再使用覆盖的方式，而是如图5所示，使用追加的存储方式，将每次从网络中请求的状态数据均存储到redux中。为了区分各个状态数据，为每个状态数据添加对应的索引。所述索引是根据调用所述组件的页面以及用户在所述组件上的操作生成的。例如，在图2所示的筛选组件中，若用户的操作为：从终端分支控件的筛选项中选择出debug，则根据debug和调用该组件的页面生成索引，并将从网络中请求到的与debug对应的状态数据以及所述索引存储到redux中。当用户再次从终端分支控件中选择debug时，就可以直接从redux中找到对应的状态数据并进行加载、渲染了。

本发明第三实施例，提出了一种通过redux存储数据的方法，如图7所示，所述方法具体包括以下步骤：

步骤s701：当检测到用户在组件上的操作时，所述组件判断在redux中是否存在与所述操作对应的状态数据。

若是，则执行步骤s702；若否，则执行步骤s703。

具体的，在步骤s701之前，所述方法还包括：

在redux中设置与组件对应的key，以通过所述key存储调用所述组件的各个页面的各个状态数据。

在现有技术中，redux是一种javascript框架，为应用程序提供一个可预测的状态容器。针对一个组件，在redux中分别设置多个与调用该组件的页面对应的key，并通过各个页面的key存储组件在对应页面中的最终状态数据。而在本发明实施例中，针对一个组件，在redux中设置与该组件对应的key，并通过该key存储调用该组件的各个页面的各个状态数据。

进一步的，所述组件判断在redux中是否存在与所述操作对应的状态数据，包括：

所述组件从redux中确定出与所述组件对应的key，并判断在所述key中是否存在与所述操作对应的状态数据。

步骤s702：在redux中存在与所述操作对应的状态数据的情况下，所述组件从redux中获取与所述操作对应的状态数据，并根据所述状态数据在所述页面中进行渲染。

步骤s703：在redux中不存在与所述操作对应的状态数据的情况下，所述组件从网络中获取与所述操作对应的状态数据。

步骤s704：所述组件获取所述页面的url(uniformresourcelocator，统一资源定位符)，并根据url和产生的随机值，利用哈希算法，生成对应的哈希值。

具体的，所述随机值可以是当前时间，也可以是打开所述页面的次数。添加随机值的目的是为了区分一个页面被多次使用的情况。

优选的，通过reactrouter自动在url后面加入随机值。

步骤s705：所述组件根据预设类型表，确定出与所述操作对应的控件的类型值。

具体的，类型值是一种标识，例如在图2中，类型值为一个子筛选项的标识。比如imei筛选项，它的类型值就是type_imei。每个筛选项的类型值是使用前定义好的。

步骤s706：所述组件根据所述哈希值和所述类型值生成对应的索引。

步骤s707：所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中。

进一步的，所述方法还包括：

所述组件按照设定时间，定期在key中对存储的索引及对应的状态数据进行清除。

例如，每个页面只允许存储设定数量的状态数据；或者根据存储时间对状态数据进行清除。

本发明实施例在redux中存储的状态数据不再使用覆盖的方式，而是如图5所示，使用追加的存储方式，将每次从网络中请求的状态数据均存储到redux中。为了区分各个状态数据，为每个状态数据添加对应的索引。所述索引是根据调用所述组件的页面以及用户在所述组件上的操作生成的。例如，在图2所示的筛选组件中，若用户的操作为：从终端分支控件的筛选项中选择出debug，则根据debug和调用该组件的页面生成索引，并将从网络中请求到的与debug对应的状态数据以及所述索引存储到redux中。当用户再次从终端分支控件中选择debug时，就可以直接从redux中找到对应的状态数据并进行加载、渲染了。

本发明第四实施例，提出了一种通过redux存储数据的装置，如图8所示，所述装置具体包括以下组成部分：

判断模块801，用于当检测到用户在组件上的操作时，所述组件判断在redux中是否存在与所述操作对应的状态数据；

获取模块802，用于在redux中不存在与所述操作对应的状态数据的情况下，所述组件从网络中获取与所述操作对应的状态数据；

生成模块803，用于所述组件根据所述操作以及调用所述组件的页面，生成对应的索引；

存储模块804，用于所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中。

进一步的，所述获取模块802，还用于：

在redux中存在与所述操作对应的状态数据的情况下，从redux中获取与所述操作对应的状态数据，并根据所述状态数据在所述页面中进行渲染。

进一步的，所述装置还包括：

渲染模块，用于在所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中之后，所述组件从key中获取已存储的状态数据，并根据所述状态数据在所述页面中进行渲染。

进一步的，所述生成模块803，具体用于：

所述组件获取所述页面的统一资源定位符url，并根据url和产生的随机值，利用哈希算法，生成对应的哈希值；

所述组件根据预设类型表，确定出与所述操作对应的控件的类型值；

所述组件根据所述哈希值和所述类型值生成对应的索引。

更进一步的，所述装置还包括：

清除模块，用于所述组件按照设定时间，定期在key中对存储的索引及对应的状态数据进行清除。

本发明第五实施例，提出了一种通过redux存储数据的设备，如图9所示，所述设备包括：处理器901、存储器902及通信总线；

所述通信总线用于实现处理器901和存储器902之间的连接通信；

处理器901用于执行存储器902中存储的通过redux存储数据的程序，以实现以下步骤：

当检测到用户在组件上的操作时，所述组件判断在redux中是否存在与所述操作对应的状态数据；

在redux中不存在与所述操作对应的状态数据的情况下，所述组件从网络中获取与所述操作对应的状态数据；

所述组件根据所述操作以及调用所述组件的页面，生成对应的索引；

所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中。

本发明第六实施例，提出了一种计算机可读存储介质，所述计算机可读存储介质存储有通过redux存储数据的程序；

当所述通过redux存储数据的程序被至少一个处理器执行时，导致所述至少一个处理器执行以下步骤操作：

当检测到用户在组件上的操作时，所述组件判断在redux中是否存在与所述操作对应的状态数据；

在redux中不存在与所述操作对应的状态数据的情况下，所述组件从网络中获取与所述操作对应的状态数据；

所述组件根据所述操作以及调用所述组件的页面，生成对应的索引；

所述组件将从网络中获取到的状态数据和所述索引存储到redux中与所述组件对应的key中。

本发明实施例中介绍的通过redux存储数据的方法、装置、设备及可读存储介质，通过redux可以存储多个页面的多个状态数据；组件可以完全复用，且复用后的状态数据不会被替换，达到真正意义上的组件复用。此外，页面和组件的业务解耦，通过组件直接管理组件的状态数据。

通过具体实施方式的说明，应当可对本发明实施例为达成预定目的所采取的技术手段及功效得以更加深入且具体的了解，然而所附图示仅是提供参考与说明之用，并非用来对本发明实施例加以限制。