标签: ngrx-reducers

我有一个带有对象数组的 ngrx 商店。我正在寻找的是，使用数组索引更新（修改）数组内的对象。我的 ngrx 数据看起来像，

    policies: {
        beneficiaries: {
            beneficiaries: [{
                    name: 'pqr'
                    age: 56
                },
                {
                    name: 'xyz'
                    age: 76
                }
            ]
        }
    }

我必须根据数组索引更新受益人姓名。所以我实现了以下reducer功能

    on(policiesActions.updateBeneficiaryPercentage, (state, action) => {
        return {
          ...state,
          beneficiaries: {
            ...state.beneficiaries,
            beneficiaries: {
              ...state.beneficiaries.beneficiaries,
              [action.index]: {
                ...state.beneficiaries.beneficiaries[action.index],
                name: action.value
              }
            }
          }
        };
      })

上面代码的问题是，运行这段代码后，我的商店结构变成了

policies: {
    beneficiaries: {
        beneficiaries: {
            0: {
                name: 'pqr'
                age: 1000
            },
            1: {
                name: 'xyz'
                age: 76
            }
        }
    }
}

请帮我修复代码，以便我可以在不改变存储结构的情况下更新值。

我正在 Angular 12 和最新的 NgRx 库中创建一个应用程序以供参考。我有以下模型、操作、减速器和应用程序状态类。

模型

export interface Tutorial {
  name: string;
  url: string;
}

行动

import { Injectable } from '@angular/core'
import { Action } from '@ngrx/store'
import { Tutorial } from '../_models/tutorial.model'

export const ADD_TUTORIAL       = '[TUTORIAL] Add'
export const REMOVE_TUTORIAL    = '[TUTORIAL] Remove'

export class AddTutorial implements Action {
    readonly type = ADD_TUTORIAL

    constructor(public payload: Tutorial) {}
}

export class RemoveTutorial implements Action {
    readonly type = REMOVE_TUTORIAL
    
    constructor(public payload: number) {}
}

export type Actions …