How to use the @ngxs/store.Action function in @ngxs/store

if (child.slug !== slug) {
                      return child;
                    }

                    return { ...child, value: response.value };
                  });
                })};
              })
            };
          })});
        }
      })
    );
  }

  @Action(RenameSiteSettingsSitenameAction)
  renameSiteSettingsSitename({ setState, getState }: StateContext, action: RenameSiteSettingsSitenameAction) {
    const state = getState();
    const newState = {};

    /* Using the loop to retain the element order in the map */
    for (const siteName in state) {
      if (siteName === action.site.name) {
        newState[action.siteName] = state[siteName];
      } else {
        newState[siteName] = state[siteName];
      }
    }

    setState(newState);
  }

turnLayersOff: 'Turn layers off',
      showLayerTransparency: 'Transparency',
      showLayerDescription: 'Layer description'
    }
  }
})
export class LayertreeState {
  @Action(HasLayertree)
  hasLayertree(ctx: StateContext, action: HasLayertree) {
    ctx.setState(
      produce(ctx.getState(), draft => {
        draft.hasLayertree = action.payload;
      })
    );
  }
  @Action(SetLayertreeDisabled)
  setDisabled(
    ctx: StateContext,
    action: SetLayertreeDisabled
  ) {
    ctx.setState(
      produce(ctx.getState(), draft => {
        draft.disabled = action.payload;
      })
    );
  }
  @Action(SetLayertreeTitle)
  setTitle(ctx: StateContext, action: SetLayertreeTitle) {
    ctx.setState(
      produce(ctx.getState(), draft => {
        draft.title = action.payload;
      })

tslib_1.__metadata("design:returntype", void 0)
    ], IdentityState.prototype, "updateRole", null);
    tslib_1.__decorate([
        Action(GetUsers),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object, GetUsers]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IdentityState.prototype, "getUsers", null);
    tslib_1.__decorate([
        Action(GetUserById),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object, GetUserById]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IdentityState.prototype, "getUser", null);
    tslib_1.__decorate([
        Action(DeleteUser),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object, GetUserById]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IdentityState.prototype, "deleteUser", null);
    tslib_1.__decorate([
        Action(CreateUser),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object, CreateUser]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IdentityState.prototype, "addUser", null);
    tslib_1.__decorate([
        Action(UpdateUser),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object, UpdateUser]),
        tslib_1.__metadata("design:returntype", void 0)
    ], IdentityState.prototype, "updateUser", null);

@Action(AddSectionEntriesAction)
  addSectionEntries({ patchState, getState }: StateContext, action: AddSectionEntriesAction) {
    const state = getState();
    patchState({[action.siteName]: [...state[action.siteName], ...action.entries]});
  }

  @Action(AddSiteEntriesAction)
  addSiteEntries({ patchState, getState }: StateContext, action: AddSiteEntriesAction) {
    const currentState   = getState();
    const newEntries = {};
    newEntries[action.site.name] = action.entries;
    patchState({...currentState, ...newEntries});
  }

  @Action(RenameSectionEntriesAction)
  renameSectionEntries({ patchState, getState }: StateContext, action: RenameSectionEntriesAction) {
    const state = getState();

    if (!state[action.section.site_name]) {
      return;
    }

    patchState({
      [action.section.site_name]: state[action.section.site_name].map(entry => {

        if (entry.sectionName === action.section.name) {
          return {...entry, sectionName: action.newSectionName};
        }
        return entry;
      })
    });

@Action(SelectColumn)
  selectColumn({ dispatch, patchState }: StateContext,
               { payload }: SelectColumn) {
    const { column } = payload;
    patchState({ column });
    dispatch(new SelectionColumnUpdated({ column }));
  }

  @Action(SelectionColumnUpdated)
  selectionColumnUpdated({ dispatch }: StateContext,
                         { payload }: SelectionColumnUpdated) {
    const { column } = payload;
    dispatch(new Message({ text: column? `Column ${column} selected` : '' }));
  }

  @Action(SelectionRowsUpdated)
  selectionRowsUpdated({ dispatch }: StateContext,
                       { payload }: SelectionRowsUpdated) {
    const { rows } = payload;
    const index = this.store.selectSnapshot(DDBState.getIndex);
    let text = '';
    if (rows.length === 1)
      text = `Row ${rows[0] + index + 1} selected`;
    else if (rows.length > 1) {
      const others = pluralize(rows.length - 1, {
        '=1': 'one other', 'other': '# others'
      });
      text = `Row ${rows[0] + index + 1} and ${others} selected`;
    }
    dispatch(new Message({ text }));
  }

newSubmissions[i].meta.order = i;
    }

    ctx.patchState({
      editing: newEditing,
      submissions: newSubmissions
    });

    if (action.openSheet) {
      this.viewSubmissionManager.askToOpenSheet();
    }

    return ctx.dispatch(new SaveState(ctx.getState()));
  }

  @Action(PostyBirbActions.UpdateWebsites)
  updateSubmissionWebsites(ctx: StateContext, action: PostyBirbActions.UpdateWebsites) {
    const { submissions } = ctx.getState();
    let newSubmissions = [...submissions];

    const index: number = this.findIndex(action.archive.meta.id, newSubmissions);
    if (index !== -1) {
      newSubmissions[index].meta.unpostedWebsites = action.websites;
    }

    ctx.patchState({
      submissions: newSubmissions
    });

    return ctx.dispatch(new SaveState(ctx.getState()));
  }

const ix = rows.indexOf(row);
      rows.splice(ix, 1);
      patchState({ rows });
      dispatch(new SelectionRowsUpdated({ rows }));
    }
  }

  @Action(ReplaceRowsInSelection)
  replaceRowsInSelection({ dispatch, patchState }: StateContext,
                         { payload }: ReplaceRowsInSelection) {
    const { rows } = payload;
    patchState({ rows });
    dispatch(new SelectionRowsUpdated({ rows }));
  }

  @Action(SelectColumn)
  selectColumn({ dispatch, patchState }: StateContext,
               { payload }: SelectColumn) {
    const { column } = payload;
    patchState({ column });
    dispatch(new SelectionColumnUpdated({ column }));
  }

  @Action(SelectionColumnUpdated)
  selectionColumnUpdated({ dispatch }: StateContext,
                         { payload }: SelectionColumnUpdated) {
    const { column } = payload;
    dispatch(new Message({ text: column? `Column ${column} selected` : '' }));
  }

  @Action(SelectionRowsUpdated)
  selectionRowsUpdated({ dispatch }: StateContext,

invitingUser: null,
        notifiedChatRooms: [],
        currentUser: null,
        lastSentHashCode: null,
        isOpenChatBox: false,
        incomingVideoCall: null,
        handshakedVideoCall: null,
        inviterVideoCall: null,
        iceServers: [],
        callErrorCode: null
    }
})
@Injectable()
export class ChatState {

    @Action(ChatActions.TakeUserOnline)
    public takeUserOnline(ctx: StateContext, { event }: ChatActions.TakeUserOnline) {
        return ctx.setState(
            patch({
                currentUser: event.user
            })
        )
    }

    @Action(ChatActions.ToggleOpenChatRoom)
    public toggleOpenChatRoom(ctx: StateContext, { toggle }: ChatActions.ToggleOpenChatRoom) {
        const state = ctx.getState()
        return ctx.setState(
            patch({
                isOpenChatBox: toggle
            })
        )

}

  constructor(private identityService: IdentityService) {}

  @Action(GetRoles)
  getRoles({ patchState }: StateContext, { payload }: GetRoles) {
    return this.identityService.getRoles(payload).pipe(
      tap(roles =>
        patchState({
          roles,
        }),
      ),
    );
  }

  @Action(GetRoleById)
  getRole({ patchState }: StateContext, { payload }: GetRoleById) {
    return this.identityService.getRoleById(payload).pipe(
      tap(selectedRole =>
        patchState({
          selectedRole,
        }),
      ),
    );
  }

  @Action(DeleteRole)
  deleteRole({ dispatch }: StateContext, { payload }: GetRoleById) {
    return this.identityService.deleteRole(payload).pipe(switchMap(() => dispatch(new GetRoles())));
  }

  @Action(CreateRole)

const cloneSectionValidations: SectionValidation[] = ObjectUtils.clone(state.sectionValidations)
        cloneSectionValidations.push({
            section: renderedSection.sectionName,
            isValid: false
        })

        ctx.setState({
            ...state,
            renderingSections: cloneRenderingSections,
            sectionValidations: cloneSectionValidations,
            filterState: PageActions.RenderedPageSectionAction
        })
    }

    @Action(PageActions.EndRenderingPageSectionsAction)
    public endRenderingPageSections(ctx: StateContext, { }: PageActions.EndRenderingPageSectionsAction) {
        const state = ctx.getState()
        ctx.setState({
            ...state,
            filterState: PageActions.EndRenderingPageSectionsAction
        })
    }

    @Action(PageActions.OnDestroyingPage)
    public destroyingPage(ctx: StateContext, { }: PageActions.OnDestroyingPage) {
        const state = ctx.getState()
        ctx.setState({
            ...state,
            filterState: PageActions.OnDestroyingPage
        })
    }