NGXS如何在不使用ctx参数的情况下调用setState和patchState？

下面是几种摆脱ctx参数、实现可复用patch逻辑的具体方法：

1. 直接传入所需方法到复用函数 #

把setState从context中解构出来，作为参数传给复用的patch处理函数，让函数只依赖需要的方法而非整个context：

// 可复用的patch处理函数
const applyTaskPatch = (setState: (updater: any) => void, payload: any) => {
  setState(
    patch({
      // 这里编写你的patch逻辑，比如基于payload更新对应状态字段
      ...payload
    })
  )
}

// 改造后的updateThings函数
updateThings(ctx: StateContext<TaskStateModel>, { payload }: any): any {
  applyTaskPatch(ctx.setState, payload)
}

2. 封装自定义Hook（React环境下） #

如果是React项目，可将状态更新和patch逻辑封装成自定义Hook，在Hook内部直接访问状态更新方法，组件调用时无需传入context：

import { useState } from 'react'
import { patch } from '你的patch工具库路径'

const useTaskState = (initialState: TaskStateModel) => {
  const [state, setState] = useState(initialState)

  // 封装好的patch更新方法
  const patchState = (payload: any) => {
    setState(prevState => patch(prevState, payload))
  }

  return { state, patchState }
}

// 组件内使用示例
const YourTaskComponent = () => {
  const { state, patchState } = useTaskState(initialTaskState)

  // 直接调用patchState完成更新，无需依赖context
  const handleUpdate = (payload: any) => {
    patchState(payload)
  }

  // ...其他组件逻辑
}

3. 柯里化复用函数 #

先让复用函数接收setState，返回一个专门处理payload的函数，后续调用时只需传入payload即可：

const createTaskUpdater = (setState: (updater: any) => void) => {
  return (payload: any) => {
    setState(
      patch({
        // 编写你的patch逻辑
        ...payload
      })
    )
  }
}

// 使用时
updateThings(ctx: StateContext<TaskStateModel>, { payload }: any): any {
  const updateTask = createTaskUpdater(ctx.setState)
  updateTask(payload)
}

这些方案都能让你的patch逻辑与StateContext解耦，实现真正的复用性。

内容的提问来源于stack exchange，提问作者Ben Racicot