javascript - NGXS 在 setState 中传播状态

Question

import { State, Action, StateContext } from '@ngxs/store';

export class FeedAnimals {
  static readonly type = '[Zoo] FeedAnimals';
}

export interface ZooStateModel {
  feed: boolean;
}

@State<ZooStateModel>({
  name: 'zoo',
  defaults: {
    feed: false
  }
})
export class ZooState {
  @Action(FeedAnimals)
  feedAnimals(ctx: StateContext<ZooStateModel>) {
    const state = ctx.getState();
    ctx.setState({
      ...state,
      feed: !state.feed
    });
  }
}

我正在从 gitbook 学习 ngxs，上面的 block 是从那里复制的。在此示例中，...state 分配给对象。为什么我们需要这个？所以我们只有一个对象属性 feed 并且已经分配了 feed: !state.feed

Answer 1

你需要使用...state，因为你想修改当前state的状态

使用扩展运算符，您可以进行复制操作，因此先前的状态将被复制到新的状态对象，并且您可以修改新创建的状态对象中的数据。

const a = [1, 2, 3]

const b = [...a, 4, 5, 6] =>  [1, 2, 3, 4, 5, 6]

所以这段代码

...state,
feed: !state.feed

您正在制作状态对象的新副本并修改状态对象内的 feed 属性