Spartacus の実際のプロジェクト開発における TypeScript オブジェクト分割演算子の適用

以下のコードは、navigation-entry-item.reducer.tsSpartacus プロジェクトの実装からのものです。

import {
    
     NodeItem } from '../../model/node-item.model';
import {
    
     CmsActions } from '../actions/index';

export const initialState: NodeItem | undefined = undefined;

export function reducer(
  state = initialState,
  action: CmsActions.CmsNavigationEntryItemAction
): NodeItem | undefined {
    
    
  switch (action.type) {
    
    
    case CmsActions.LOAD_CMS_NAVIGATION_ITEMS_SUCCESS: {
    
    
      if (action.payload.components) {
    
    
        const components = action.payload.components;
        const newItem: NodeItem = components.reduce(
          (compItems: {
    
     [uid_type: string]: any }, component: any) => {
    
    
            return {
    
    
              ...compItems,
              [`${
      
      component.uid}_AbstractCMSComponent`]: component,
            };
          },
          {
    
    
            ...{
    
    },
          }
        );

        return {
    
    
          ...state,
          ...newItem,
        };
      }
    }
  }

  return state;
}

このコードは、CMS (コンテンツ管理システム) ナビゲーション項目の状態を処理するために Angular アプリケーションで使用される Reducer 関数です。ここでは、コードの各行の意味を 1 行ずつ説明します。

import { NodeItem } from '../../model/node-item.model';
../../model/node-item.modelでモデルが導入されNodeItem、ナビゲーションエントリのデータ構造を定義するために使用されます。
import { CmsActions } from '../actions/index';
で導入されましたが../actions/index、ここでは、ステートマネージャーで特定の操作をトリガーするために使用される Angular アクションのコレクションであるとCmsActions想定されています。CmsActions
export const initialState: NodeItem | undefined = undefined;
またはinitialState型の初期状態を定義し、に初期化されます。この初期状態は、ナビゲーション項目の初期状態を設定するために Reducer で使用されます。NodeItemundefinedundefined
export function reducer(state = initialState, action: CmsActions.CmsNavigationEntryItemAction): NodeItem | undefined {
stateとの2 つのパラメータを受け取り、型またはactionを返すReducer 関数を定義します。Reducer 関数の役割は、受信したデータに基づいて新しい状態を更新して返すことです。NodeItemundefinedactionstate
switch (action.type) {
このステートメントを使用してswitch入力の型を確認し、actionその違いに応じaction.typeて対応する処理ロジックを実行します。
case CmsActions.LOAD_CMS_NAVIGATION_ITEMS_SUCCESS: {
action.typeと等しい場合はCmsActions.LOAD_CMS_NAVIGATION_ITEMS_SUCCESS、このcaseブロックに入り、CMS ナビゲーション項目をロードするアクションが正常に受信されたことを示します。
if (action.payload.components) {
action.payload.components存在するかどうかを確認し、action.payload通常はアクションのロードで、componentsフィールドがあるかどうかをここで判断します。
const components = action.payload.components;
action.payload.components後で使用するために定数に値を割り当てますcomponents。
const newItem: NodeItem = components.reduce((compItems: { [uid_type: string]: any }, component: any) => {
reduce配列のメソッドを使用してcomponents処理し、新しいオブジェクトに変換しますnewItem。オブジェクトがキーcomponent.uidで、対応するコンポーネントオブジェクトが値です。
return { ...compItems, [ $KaTeX 解析エラー: 予期された 'EOF'、位置 52 で '}' を取得しました: …`]: コンポーネント、}̲;` 各反復で、`com... {component.uid}_AbstractCMSComponent コンポーネント`$ オブジェクト的形式命名，值为当前遍历到的。
}, { ...{}, });
reduceメソッドの 2 番目のパラメータは初期値で、ここでは{}最初の反復の値として空のオブジェクトに設定されますcompItems。
return { ...state, ...newItem, };
読み込みが成功したら、オブジェクトスプレッド演算子を使用して合計を新しいオブジェクトにstateマージし、新しい状態を返します。newItemこれは、不変性を維持し、元の状態を直接変更することを避けるために行われます。
return state;
switchステートメントのブロックでの処理後case、一致するものがない場合はaction.type、状態変化が発生していないことを示す現在の状態が返されますstate。

上記は、この Angular コードの 1 行ごとの説明です。これは、CMS ナビゲーション項目の状態更新を処理する Reducer 関数です。アクションが受信されるとCmsActions.LOAD_CMS_NAVIGATION_ITEMS_SUCCESS、アクションはアクションペイロードから抽出されcomponents、新しい状態オブジェクトに変換され、前の状態とマージされて返されます。対応するアクションタイプが見つからない場合は、現在の状態が返されます。ここでは、オブジェクトと配列をより便利に処理するために、オブジェクト拡張演算子や構造化代入などの一部の ES6 構文が使用されていることに注意してください。

Spartacus の実際のプロジェクト開発における TypeScript オブジェクト分割演算子の適用

おすすめ