setState 中的 NGXS 传播状态

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，上面的块是从那里复制的。在这个例子中 ...state 分配给对象。为什么我们需要这个？所以我们只有一个对象属性提要并且已经分配了 feed: !state.feed

Answer 1

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

您正在使用传播运算符进行复制操作，因此先前的状态将被复制到新的状态对象，您修改新创建的状态对象中的数据。

const a = [1, 2, 3]

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

所以这段代码

...state,
feed: !state.feed

您正在制作状态对象的新副本并修改状态对象中的提要属性

setState 中的 NGXS 传播状态

NGXS spreading states in setState

javascript

typescript

redux

angular

ngxs