通过编程选择嵌套属性来突变状态

Question

我正在努力使用NGXS的内部API来突变我州的深层嵌套属性。

由于NGXS的状态是不可变的，因此我当前的解决方案是重新创建状态实例，然后将其与我旧状态的内容进行补充，并具有我想要突变的一个属性的条件。

我的状态模型：

interface TaskStateModel {
  tasks: Tasks;
}

任务类：

export class Tasks { // I have obfuscated the property names
property1: UniqueTask[]
proprety2: UniqueTask[]
// etc...
  constructor(init?: Partial<Tasks>) {
    Object.assign(this, init);
  }
}

iniquetask class：

export class UniqueTask { // Only including the relevant properties
taskIds: string[];
asssignedUserName: string;

  constructor(init?: Partial<UniqueTask>) {
    Object.assign(this, init);
  }
}

aistrizattask action> Action：

  export class AssignTask {
    static readonly type = '[Task] Assign Task';

    constructor(public taskIds: string[], public taskType: string) {}

  }

这是我的当前解决方案：

  @Action(AssignTask)
  assignTasks(ctx: StateContext<TaskStateModel>, action: AssignTask) {
    return this.taskService.assignTasks(action.taskIds).pipe(
      tap(response => {
        if (response.ok) {
          action.taskIds.forEach(taskId => {
            const state = ctx.getState();
            const newState: TaskStateModel = {tasks: new Tasks()};
            const taskIndexToBeAssigned = state.tasks[action.taskType].findIndex(task => task.taskIds.includes(taskId));
            Object.keys(state.tasks).forEach(property => {
              if (property !== action.taskType) {
                newState.tasks[property] = state.tasks[property];
              }
              else {
                newState.tasks[property] = state.tasks[property].map((task, index) => {
                  const assignedUserName = (taskIndexToBeAssigned === index) ? this.currentUserService.currentUser.name : task.assignedUserName;
                  return new UniqueTask({
                    ...task,
                    assignedUserName
                  });
                });
              }
            });
            ctx.setState(newState);
          });
        }
      })
    );
  }

Action aindisttask < /code>发送 taskType 以选择所需的属性和 taskid ，以选择要突变属性的数组中的元素。

我的目标是使用 setState ， patch 和 updateItem 方法实现相同的结果。

对于它的价值，这是我自己自己做的尝试：

  @Action(AssignTask)
  assignTasks(ctx: StateContext<TaskStateModel>, action: AssignTask) {
    return this.taskService.assignTasks(action.taskIds).pipe(
      tap(response => {
        if (response.ok) {
          action.taskIds.forEach(taskId => {
            ctx.setState(patch({
              tasks: patch({
                [action.taskType] : updateItem<UniqueTask>(task => task.taskIds(taskId), // [action.taskType] cannot be used as a programmatic property selector here
                  task => {
                    return {...task, assignedUserName: this.currentUserService.currentUser.name};
                  })
              })
            }));
          });
        }
      })
    );
  }

Answer 1

您可能想使用此NGXS实验室包
https://npmjs.com/package/ppackage/ppackage/@ngxs-labs-labs-labs-labs-labs-labs-labs-labs/immer-adapter

导入 immutableContext

import { ImmutableContext } from '@ngxs-labs/immer-adapter';

实现

export const AUTH_STATE_TOKEN = new StateToken<AuthStateModel>('auth');

export const authDefaults: AuthStateModel = {
  isAuthenticated: false,
  signInProvider: 0,
  profile: {
    loaded: false,
    displayName: '',
    photoURL: ''
  },
  request: {
    firebase: {
      loaded: false, 
      length: 0,
      errors: null, 
      data: null
    }
  }
};

@State<AuthStateModel>({
  name: AUTH_STATE_TOKEN,
  defaults: authDefaults
})

操作

  @Action(MyAction)
  @ImmutableContext()
  sampleFunction({ setState }: StateContext<AuthStateModel>, action: MyAction) {
    setState((state: MyStateModel) => {
      state.isAuthenticated = true;
      state.signInProvider = SignInProvider.SocialMedia;
      state.profile.loaded = true;
      state.profile.displayName = displayName;
      state.profile.photoURL = defaultImage(displayName);
      state.request.firebase.loaded = !!action.state;
      state.request.firebase.length = action.state ? 1 : 0;
      state.request.firebase.data = action.state;
      return state;
    });
  }