How to use the @ngxs/store/operators.patch function in @ngxs/store

layerPosition({ setState }: StateContext, action: LayerPosition) {
    // reset the top/left position of the current page
    // and the root layer
    setState(
      patch({
        currentPage: patch({
          frame: patch({
            x: action.left,
            y: action.top
          })
        })
      })
    );
  }

}

        ctx.setState(
            patch({
                availableUsers: updateItem(a => a.userName === foundUser.userName, foundUser)
            })
        )
        if (ObjectUtils.isNotNull(foundRoom)) {
            return ctx.dispatch(new ChatActions.ActiveDoubleChatRoom({
                chatSession: foundRoom.currentSession
            }))
        }
        else {
            // No found room, mean need to fetch from server
            ctx.setState(
                patch({
                    invitingUser: event.inviee
                })
            )
            // Notify Chat Service to init double chat room
            return ctx.dispatch(new ChatActions.FetchDoubleChatRoom())
        }
    }

public clickedOnChatBoxIcon(ctx: StateContext, { event }: ChatActions.ClickedOnChatBox) {
        const state = ctx.getState()
        const foundRoom = state.chatRooms.find(a => a.chatRoomId === event.chatRoomId)
        if (ObjectUtils.isNotNull(foundRoom)) {
            // Clear all messages
            let notifiedChatRooms: string[] = ObjectUtils.clone(state.notifiedChatRooms)
            if (ObjectUtils.isNotNull(notifiedChatRooms)) {
                notifiedChatRooms = notifiedChatRooms.filter(a => a !== foundRoom.chatRoomId)

                ctx.setState(
                    patch({
                        notifiedChatRooms: notifiedChatRooms
                    })
                )
            }
            return ctx.dispatch(new ChatActions.ActiveDoubleChatRoom({
                chatSession: foundRoom.currentSession
            }))
        }
    }

zoomOut({ getState, setState }: StateContext, action: ZoomOut) {
    const zoomLevel = parseFloat(
      (getState().zoomLevel - action.value).toFixed(2)
    );

    setState(
      patch({
        zoomLevel: iif(zoomLevel >= 0.1, zoomLevel)
      })
    );
  }

public forceDroppedCall(ctx: StateContext, { error }: ChatActions.ForceDroppedCall) {
        return ctx.setState(
            patch({
                handshakedVideoCall: null,
                iceServer: null,
                incomingVideoCall: null,
                inviterVideoCall: null,
                callErrorCode: error
            })
        )
    }
}

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

public loadedAllUsers(ctx: StateContext, { event }: ChatActions.LoadedAllAvailableUsers) {
        event.availableUsers.forEach(u => {
            u.incomingMessages = 0
        })
        return ctx.setState(
            patch({
                availableUsers: event.availableUsers
            })
        )
    }

public incomingVideoCall(ctx: StateContext, { event }: ChatActions.NotifyIncomingVideoCall) {
        const foundUser = ctx.getState().availableUsers.find(a => a.userName === event.caller.username)
        return ctx.setState(
            patch({
                incomingVideoCall: event.caller,
                inviterVideoCall: foundUser
            })
        )
    }

deleteFavoriteMovie({ setState }: StateContext, { payload }) {
        setState(
            patch({
                favorites: removeItem(movie => movie.id === payload.id)
            })
        );
    }

zoomIn({ getState, setState }: StateContext, action: ZoomIn) {
    const zoomLevel = parseFloat(
      (getState().zoomLevel + action.value).toFixed(2)
    );

    setState(
      patch({
        zoomLevel: iif(zoomLevel <= 3, zoomLevel)
      })
    );
  }