react hooks 如何实现类似于中间件那样的调用？

[xiaoming1992]

// 希望实现如下的 useMiddleware 函数, 尝试了一下, 发现有点费劲
// 尝试性翻看 react-use, 果然有相似的实现: https://github.com/streamich/react-use/blob/master/docs/useMediatedState.md
// 感觉已经很合用了, 但是好像如下这样的调用方式, 更好看, 更灵活
// 见多识广的大佬能指点一下哪儿是否有类似的实现吗?
// 或者指出我这样调用的弊端?
// 如果实在没有, 可能就得参考 react-use, 硬着头皮自己写了
// 提前感谢大佬们
export function Foo() {
  const [number, setNumber] = useState(1)

  // 这儿能通过类似于中间件那样的语法链式调用, 扩展 setNumber 函数
  const newSetNumber = useMiddleware(setNumber).use((val) => val * 2).use((val) => val - 1).value

  return <button onClick={() => newSetNumber((val) => val + 5)}>
    {number}
  </button>
}

[dekuofa]

这个？ https://ramdajs.com/docs/#pipe

[xiaoming1992]

@dekuofa 这就看出我的基础不行了，确实，这叫管道更合适一些。但是我希望包内部能处理 useHook 输入参数的差异

[phobal]

看 taro3 支持类似 jquery 的 chain 式调用，可以去看下他们的实现

[ccraohng]

要么返回 this 之类的要么返回同样功能的 object，最后 value 实现 get，use 就是把参数加入队列，计算的时候依次求值

[dekuofa]

@xiaoming1992 不是很明白你的"包内部能处理 useHook 输入参数的差异"，这块能展开描述一下吗

[StrayBugs]

如果能接受 rxjs 的话可以看看 https://observable-hooks.js.org

[xiaoming1992]

@dekuofa
``` tsx
function Foo() {
__// 这个 setNumber 函数既可以接受 number 类型的参数, 也可以是 (prev: number) => number 函数作为参数, 我希望能像 react-use useMediatedState 那样在函数的内部就把入参的差异给抹掉, 而不是在用的时候再判断
__const [number, setNumber] = useState(1)
// ...
}
```

[xiaoming1992]

@StrayBugs 说实话，总感觉 rxjs 和 react 不怎么搭...

[Qinmei]

自己写个 middleware 函数就行了吧，不过前端对于数据的处理确实不多

[xiaoming1992]

@Qinmei 我的链接中的 react-use 的例子就是非常典型的使用场景，主要是构造那么一个函数有些麻烦。不过今天想了想，还是没用 react-use 的方法，用的 useEffect 监听值的变动，在变动以后当成副作用来作进一步处理。

[ericgui]

@xiaoming1992 https://redux-observable.js.org/