react全局状态管理_挖坑之路之用Electron写小说app(三)：造一个react全局状态管理...

好久没弄了。。开学了好多事情，而且我发现我之前的一些思路有问题，在此记录一下。

俺的软件使用react开坑的，所以react遇到的问题我也遇到了。。

react hooks能很好的管理局部状态，但是没法很好的进行组件间的交流，context勉强一战，然而一想到Provider满天飞，就失去了尝试欲望。

然而作为一个app，组件间的状态交互是必不可少的，比如点击某个按钮，一个面板就会出现等等。

基于这样的思考，我就在想，那不就是需要一个中间商跳出来运输状态嘛，于是写了一个map通过命名空间和setState函数组成的键值对来更新

type Fun = (e?: any) => void


class Observer {
    private listeners = new Map<Events, Fun[]>()
    private triggerQuene: Map<Events, any | null> = new Map()
    setTrigger(channel: Events, fun: Fun) {
        ...//该函数注册更新事件到listeners中
    }
    trigger(channel: Events, e: any = null) {
        ...//该函数将参数e传递给listeners中匹配命名空间的函数
    }
}
export const observer = new Observer()


//然后自定义一个hook，来等待其他组件通过observer.trigger函数更新数据
type Trans = (e: any) => any

export function useBind<T>(event: Events, init: T, trans: Trans = (e) => e) {
    const [value, setValue] = useState<T>(init)

    useEffect(() => {
        observer.setTrigger(event, e => {
            setValue(trans(e))
        })
        return () => {
            observer.removeTrigger(event)
        }
    }, [])
    return value;
}

到目前为止它都能工作的很好：

点击一个按钮以后，会传递true这个值到panel，修改其状态。

但是写着写着。。问题来了。如果我希望修改状态时，基于目标组件的上一个状态进行更新，该怎么做呢？

目前我实现的基本都是传递固定值，如果要更改，就必传递一个更新函数，如e=>e+1,并且还要再重新写一个接收更新函数的触发器，感觉好麻烦。。而且若以后出现更多的不同形式的状态修改，代码估计会没法看。

于是去找方案，但我实在不想学一堆堆的框架了，api和概念不好记，而且我并不觉得状态交互是多么难的事，只是说不同的处理方法能否接受罢了。

其实,hook里面有一个useReducer，我一开始看到的时候以为这个hook以为就是传说中的redux的一个精简版，后来才发现只是个reducer，不过reducer的这种写法我觉得挺不错的，它把要做的事情界定好了，并通过type来说明能做哪些操作，颇有点oop的意思，即两个组件间通过方法/通道/action 进行交互。于是我在想能不能仿照一下，但是，由于组件都是函数，没法用成员方法之类的，也没法返回闭包修改状态，所以，得另辟蹊径了。

目前的想法还是通过中间人的方式：

（用process on画了个图）

我觉得这个可行性很高，太迟了，明天有空实现一下。

• 睡前小思考：为什么reducer采用action type的方式而不是直接通过函数呢，至少写起来没那么麻烦。也许是怕内存泄漏？
• 疯狂吐槽：

1. 感觉用一种别扭的方式实现了一个oop？
2. 作为一个美术盲，主题真的是折腾死我了，改天有空再写。我算是明白了，那么多开源软件太丑真的是情有可原，作者都不容易啊。