Angular Ngrx -如何让不同的调用循环一个数组？

import { createAction, createReducer, on } from '@ngrx/store';

export interface AppState {
  data: any[];
}

export const initialState: AppState = {
  data: []
};

export const loopArray = createAction('[Array] Loop');

export const appReducer = createReducer(
  initialState,
  on(loopArray, state => {
    const newData = state.data.map(item => {
      // 在这里对数组进行循环操作
      return item;
    });
    return { ...state, data: newData };
  })
);

import { StoreModule } from '@ngrx/store';
import { appReducer } from './app.state';

@NgModule({
  imports: [
    StoreModule.forRoot({ app: appReducer }),
    // 其他模块配置
  ],
  // ...
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { loopArray } from './app.state';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: `
    <ul>
      <li *ngFor="let item of data$ | async">{{ item }}</li>
    </ul>
    <button (click)="loop()">循环数组</button>
  `
})
export class MyComponent implements OnInit {
  data$: Observable<any[]>;

  constructor(private store: Store<{ app: AppState }>) { }

  ngOnInit() {
    this.data$ = this.store.pipe(select(state => state.app.data));
  }

  loop() {
    this.store.dispatch(loopArray());
  }
}