编辑（突变）对象属性在NGRX中的还原器中

Question

尝试编辑对象内的属性时，我会遇到麻烦。我正在使用Pokeapi获取Pokémon，然后用按钮将其添加到购物车中。

接口

export interface PokemonModel {
  name: string;
  url: string;
  quantity: number;
  isAdded: boolean;
}

action

export const addToCart = createAction(
  '[Cart List] Add To cart',
  props<{ pokemon: PokemonModel }>()
);

还原器

on(addToCart, (state, { pokemon }) => {
  pokemon.isAdded = true; // <-- Cannot add property isAdded, object is not extensible

  return {
    ...state,
    loading: false,
    error: false,
    pokemons: [
      ...state.pokemons.filter((pk) => pk.name !== pokemon.name),
      ...[pokemon],
    ],
  };
}),

函数

addPokemon(pokemon: any) {
  this.store.dispatch(addToCart({ pokemon }));
}

是，我需要编辑ISADDED 属性。

我已经尝试使用object.preventextensions（Pokemon）无论我是在属性上方还是下方添加，结果都是相同的。

Answer 1

小提醒：由于还原器是纯函数您不能突变 state您需要创建副本并编辑副本（此 所有函数编程princicples

是

let pokemonCopy = {...pokemon, isAdded: true}

。 >同样 不起作用。

时间，我

 return {
    ...state,
    loading: false,
    error: false,
    pokemons: [
      ...state.pokemons.filter((pk) => pk.name !== pokemon.name),
      pokemonCopy,
    ],
  };

认为这对您

return {
    ...state,
    loading: false,
    error: false,
    pokemons: [
      ...state.pokemons.map((pk) => pk.name == pokemon.name ? pokemonCopy : pk),
    ],
  };

Answer 2

不建议更改还原器内部的有效载荷，因为它们是纯粹的功能。我建议您在派遣前更新有效载荷，如下所示。派遣后，您不必担心编辑有效载荷

addPokemon(pokemon: any) {
  pokemon.isAdded = true;
  this.store.dispatch(addToCart({ pokemon }));
}

Answer 3

如果您尽可能更好地干净，例如，

on(storeActions.updateCurrentChat, (state, { currentChat }) => {
    return {
      ...state,
      currentChat: { ...currentChat },
    };
  })

您可以实际上可以突变数据并传递它们，

public stopPriting(id: string) {
    const updatedCurrenctChat = structuredClone(this.currentChat$);
    const message = updatedCurrenctChat.messages.find(
      (chat) => chat.id === id
    ) as ConvI;
    // WhichType<typeof this.currentChat$,'isPrinted'>

    (message as MeowGPTI).isPrinted = true;
    // (<MeowGPTI>message).isPrinted = true;

    this.store.dispatch(
      storeActions.updateCurrentChat({ currentChat: updatedCurrenctChat })
    );
  }

这是一种更好的方法，我相信有不同的方法来克隆对象，例如json.parse（json.stringify（obj obj（obj） ）或loadash，但这全部取决于您的情况