首页 > 其他分享 >Spartacus CMS Feature selector 的实现明细

Spartacus CMS Feature selector 的实现明细

时间:2023-07-29 18:44:26浏览次数:23  
标签:Spartacus MemoizedSelector createFeatureSelector feature selector 类型 Feature CMS

有下面这段代码:

import { createFeatureSelector, MemoizedSelector } from '@ngrx/store';
import { CmsState, CMS_FEATURE, StateWithCms } from '../cms-state';

export const getCmsState: MemoizedSelector<StateWithCms, CmsState> =
  createFeatureSelector<CmsState>(CMS_FEATURE);

以上代码是一个 Angular 应用中使用 @ngrx/store 库来创建一个 MemoizedSelector(记忆选择器)的示例。MemoizedSelector 用于从 Redux 状态树中选择特定 feature 下的状态片段。让我们逐行解释这段代码的含义:

  1. import { createFeatureSelector, MemoizedSelector } from '@ngrx/store';
    这行代码导入了 @ngrx/store 库中的 createFeatureSelectorMemoizedSelectorcreateFeatureSelector 用于创建一个特定 feature 下的选择器,而 MemoizedSelector 是一个泛型类型,用于定义选择器的类型。

  2. import { CmsState, CMS_FEATURE, StateWithCms } from '../cms-state';
    这行代码导入了从 '../cms-state' 文件中导出的三个类型:CmsStateCMS_FEATUREStateWithCms。这些类型在下面的代码中用于定义 MemoizedSelector 的类型和参数。

  3. export const getCmsState: MemoizedSelector<StateWithCms, CmsState> =
    这行代码定义了一个导出的常量 getCmsState,它的类型是 MemoizedSelector<StateWithCms, CmsState>。这里使用了泛型,其中 StateWithCms 是整个应用状态树的类型,而 CmsState 是我们想要选择的特定 feature(CMS)下的状态片段类型。

  4. createFeatureSelector<CmsState>(CMS_FEATURE);
    这行代码使用 createFeatureSelector 函数来创建一个特定 feature(CMS)下的选择器。它接收一个参数 CMS_FEATURE,用于标识特定的 feature。CMS_FEATURE 可能是一个字符串或常量,用于唯一标识该 feature。返回的选择器类型是 MemoizedSelector<StateWithCms, CmsState>,这里指定了 StateWithCms 作为整个应用状态树的类型,CmsState 作为我们想要选择的特定 feature 下的状态片段类型。

让我们进一步解释每个导入的类型的含义:

  • CmsState: 这个类型代表了特定 feature(CMS)下的状态片段。根据应用的具体情况,它可能包含 CMS 页面、组件、导航等相关的状态信息。

  • CMS_FEATURE: 这个常量用于标识特定的 feature(CMS)。它可能是一个字符串或者常量,用于在整个应用状态树中唯一标识 CMS 相关的状态。

  • StateWithCms: 这个类型代表整个应用状态树的类型。它是一个联合类型,包含了整个应用中所有 feature 的状态类型。在使用 createFeatureSelector 创建选择器时,我们需要指定一个特定的 feature,并提供它在整个状态树中的位置。

createFeatureSelector 函数的参数中,我们传入了 CMS_FEATURE,表示我们希望创建一个用于选择 CMS feature 下的状态片段的选择器。而返回的 getCmsState 就是这个 MemoizedSelector。

总结来说,以上代码演示了如何使用 @ngrx/store 库来创建 MemoizedSelector,用于从 Redux 状态树中选择特定 feature 下的状态片段。它使用了 createFeatureSelector 函数来创建特定 feature 的选择器,并且通过指定泛型类型 MemoizedSelector<StateWithCms, CmsState> 来确保选择器的类型正确。 MemoizedSelector 的灵活性和高效性使得在大型 Angular 应用中管理和选择状态变得更加简单和高效。

标签:Spartacus,MemoizedSelector,createFeatureSelector,feature,selector,类型,Feature,CMS
From: https://www.cnblogs.com/sap-jerry/p/17590278.html

相关文章

  • Spartacus 中的 navigation item reducer 实现
    关于Spartacus这段代码:exportfunctionreducer(state=initialState,action:CmsActions.CmsNavigationEntryItemAction):NodeItem|undefined{}这段代码是TypeScript中的函数定义,函数名为reducer,它是Redux中的重要概念之一。在Redux中,reducer是一个纯......
  • TypeScript 对象解构操作符在 Spartacus 实际项目开发中的应用
    下面这段代码来自Spartacus项目的navigation-entry-item.reducer.ts实现。import{NodeItem}from'../../model/node-item.model';import{CmsActions}from'../actions/index';exportconstinitialState:NodeItem|undefined=undefined;exportfu......
  • 什么是 @ngrx/store 开发包中的 MemoizedSelector
    在@ngrx/store开发包中,MemoizedSelector是一个重要的概念和工具,用于在Angular应用中管理和选择Redux状态的片段。它是@ngrx/store的一个关键特性,通过使用reselect库来实现对状态选择器的优化。MemoizedSelector可以提高状态选择器的性能,并且能够避免不必要的状态计算,......
  • spring features
     http://www.springsource.org/featuresModernWebCompletesupportformodernapplicationsincludingREST,HTML5,conversationsandAJAX.Seemore...DataAccessSupportstraditionalRDBMSaswellasnewNoSQLsolutions,map-reduceframeworksandcloudbased......
  • android imageview selector
    AndroidImageViewSelector实现流程引言在Android开发中,我们经常会使用ImageView来显示图片。而在用户与图片交互时,我们通常需要为ImageView设置不同的状态,例如按下、选中、正常等。为了实现这些状态的切换,我们可以使用Android的ImageViewSelector来简化开发。整体流程下面是......
  • configure: WARNING: expat is missing or unusable; some features may be unavailab
     001、问题:configure:WARNING:expatismissingorunusable;somefeaturesmaybeunavailable. 002、解决方法[[email protected]]#yuminstallexpat-devel 003、验证: [[email protected]]#make  参考:https://stackoverflow.com/questions/373521......
  • Spartacus Product List Page ProductSearchPage Observable 对象的设计明细
    源代码如下:readonlymodel$:Observable<ProductSearchPage>=using(()=>this.searchByRouting$.subscribe(),()=>this.searchResults$).pipe(shareReplay({bufferSize:1,refCount:true}));上面这段代码是基于Angular框架和RxJS库的,RxJS是一个用于处理......
  • Spartacus search box 里显示的产品列表数据是从哪里进行搜索的
    如下图所示,selector:cx-searchboxComponent名称:Search-box.component.ts点击searchbar之后:添加css类:在断点停下来的地方,查看搜索结果列表:抛出ProductSearch的action:最后调用ProductSearchConnector进行搜索:dispatch到adapter:ProductListComponent......
  • 关于 Spartacus ProdutList Component Service model$ 的填充逻辑
    源代码:这段代码是Angular中的RxJS代码,主要是创建一个名为model$的Observable对象,这个对象的生成逻辑复杂一些,主要涉及using,subscribe,pipe,shareReplay等函数的使用。逐行解释如下:readonlymodel$:Observable<ProductSearchPage>=using(这一行定义了一个......
  • 什么是 SAP Spartacus 的 CMS Page Connector
    SAPSpartacus是一个开源的JavaScriptweb应用程序,它与SAPCommerceCloud的后端进行交互。这是一个基于Angular和RxJS的库,具有良好的扩展性,允许开发人员以模块化的方式创建和管理SAPCommerceCloud的用户界面。而CMSPageConnector是Spartacus提供的一种连接器,......