JSON单体模型与状态、Store构建的关系及状态转换技术问询

老哥，我帮你把这个NgRx的实现思路理得明明白白的——你这种预加载大型JSON并转换为应用状态的场景，在NgRx里其实是很典型的，咱们一步步拆解：

首先得把两个东西拎清楚：

• 你说的JSON单体模型是只读的原始数据源，从后端/本地加载过来，只有原始字段（比如name、dob），没有业务需要的衍生值（比如你要的daysOld）
• 应用State是NgRx管理的核心，是经过处理、适配业务/UI的数据结构，它和原始数据源解耦，但可以基于原始数据转换生成

咱们从定义类型到最终在组件里用，一步步来：

2.1 先定义清晰的类型接口 #

先把原始数据和应用状态的类型写清楚，避免后续类型混乱：

// 对应你获取的原始大型JSON的类型
interface RawAppData {
  app: {
    people: Array<{
      name: string;
      dob: string;
    }>;
  };
}

// 应用状态里需要的Person类型（包含衍生字段daysOld）
interface AppPerson {
  name: string;
  dob: string;
  daysOld: number;
}

// 整个应用的根State结构
interface AppState {
  app: {
    people: AppPerson[];
  };
}

2.2 定义Actions（触发状态变化的信号） #

Actions是NgRx里用来“发号施令”的，这里我们需要三个核心Action：

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

// 触发加载原始JSON的指令
export const loadRawData = createAction('[Data] Load Raw JSON');

// 加载成功后，携带原始数据的通知
export const loadRawDataSuccess = createAction(
  '[Data] Load Raw JSON Success',
  props<{ rawData: RawAppData }>()
);

// 加载失败的错误通知（可选，处理异常场景）
export const loadRawDataFailure = createAction(
  '[Data] Load Raw JSON Failure',
  props<{ error: string }>()
);

2.3 写Reducer（处理状态更新的纯函数） #

Reducer是纯函数，接收当前状态和Action，返回新的状态——这里的核心就是把原始数据转换成你要的最终状态：

首先定义初始状态（就是你说的默认空数组）：

const initialState: AppState = {
  app: {
    people: []
  }
};

然后写Reducer逻辑，重点是转换daysOld：

import { createReducer, on } from '@ngrx/store';
import * as DataActions from './data.actions';

// 辅助函数：根据dob计算天数
const calculateDaysOld = (dobString: string): number => {
  const dob = new Date(dobString);
  const now = new Date();
  const diffTime = Math.abs(now.getTime() - dob.getTime());
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
  return diffDays;
};

export const dataReducer = createReducer(
  initialState,
  on(DataActions.loadRawDataSuccess, (state, { rawData }) => {
    // 把原始people数组转换成带daysOld的数组
    const transformedPeople = rawData.app.people.map(person => ({
      ...person,
      daysOld: calculateDaysOld(person.dob)
    }));

    // 注意！NgRx要求状态不可变，必须返回新对象，不能直接修改原state
    return {
      ...state,
      app: {
        ...state.app,
        people: transformedPeople
      }
    };
  }),
  // 可选：处理加载失败的情况
  on(DataActions.loadRawDataFailure, (state, { error }) => {
    // 这里可以根据需求把错误信息存入状态，方便后续展示
    return {
      ...state,
      // 比如加个error字段：error: error
    };
  })
);

2.4 用Effects处理异步加载 #

因为你是预先获取大型JSON，这是个异步操作，用NgRx Effects来处理最合适：

先写个获取数据的服务（比如从本地assets加载）：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { RawAppData } from './data.models';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}

  // 获取原始JSON数据的方法
  getRawData(): Observable<RawAppData> {
    // 假设你的大型JSON放在assets目录下
    return this.http.get<RawAppData>('/assets/large-data.json');
  }
}

然后写Effects逻辑：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import * as DataActions from './data.actions';
import { DataService } from './data.service';

@Injectable()
export class DataEffects {
  // 监听loadRawData动作，执行异步加载
  loadRawData$ = createEffect(() =>
    this.actions$.pipe(
      ofType(DataActions.loadRawData),
      mergeMap(() =>
        this.dataService.getRawData().pipe(
          // 加载成功，触发成功动作
          map(rawData => DataActions.loadRawDataSuccess({ rawData })),
          // 加载失败，触发失败动作
          catchError(error => of(DataActions.loadRawDataFailure({ error: error.message })))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private dataService: DataService
  ) {}
}

2.5 配置Store并在组件中使用 #

最后在Angular模块里配置NgRx：

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { dataReducer } from './data.reducer';
import { DataEffects } from './data.effects';

@NgModule({
  imports: [
    StoreModule.forRoot({ appState: dataReducer }), // appState是根状态的key
    EffectsModule.forRoot([DataEffects])
  ]
})
export class AppModule {}

然后在组件里触发加载并展示数据：

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as DataActions from './data.actions';
import { AppPerson, AppState } from './data.models';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let person of people$ | async">
        {{ person.name }} - {{ person.dob }} - {{ person.daysOld }} days old
      </li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  people$: Observable<AppPerson[]>;

  constructor(private store: Store<{ appState: AppState }>) {
    // 从状态中选择people数据
    this.people$ = this.store.select(state => state.appState.app.people);
  }

  ngOnInit() {
    // 页面初始化时触发加载原始JSON
    this.store.dispatch(DataActions.loadRawData());
  }
}

• 状态不可变！：这是NgRx的核心原则，Reducer里绝对不能直接修改原状态，必须用扩展运算符...复制对象/数组返回新状态
• 数据转换的时机：尽量在Reducer或者Effects里做数据转换（比如计算daysOld），别在组件里搞，保持组件只负责展示
• 大型JSON性能：如果JSON特别大，考虑分块加载，或者用NgRx的createSelector做缓存，避免重复计算
• 解耦原始数据和状态：状态结构不要和原始JSON完全绑定，这样原始JSON结构变化时，只需要修改转换逻辑就行，不用动整个状态和组件

内容的提问来源于stack exchange，提问作者user1059939