rxjs - shallowCopy

场景

react，hooks，rxjs，useObservable

section.png npc.png

npc是一个复杂类型，当我修改某个键的值，并直接next原npc对象，由于引用相同，react不会更新视图。
图中使用了useObservable，在useEffect中订阅有同样的困境。

目的

为了少写很多代码。

解决历程

1. 最初是在修改时，每次修改进行一次浅拷贝，但这样多写的代码太多了。

2. 之后在订阅时统一浅拷贝

pipe(map(v=>({...v}))) // 浅拷贝Object

缺点是只能处理Object或Array，无法处理Map和Set，或者多种可能的类型（如上图）

3. 最后我写了一个OperatorFunction：shallowCopy，其签名如下图

   
   scopy.png

关键代码

    protected _next(value: T) {
        let result: T
        result = value
        try {
            switch (typeof value) {
                case 'object':
                    const tostring = Object.prototype.toString.call(value)
                    if (Array.isArray(value)) {
                        result = [...value] as any
                    } else if (tostring === '[object Object]') {
                        result = { ...value }
                    } else if (value instanceof Set) {
                        result = new Set(value) as any
                    } else if (value instanceof Map) {
                        result = new Map(value) as any
                    }
                    break

                default:
                    break
            }
        } catch (err) {
            this.destination.error(err)
            return
        }
        this.destination.next(result)
    }

其他

向rxjs提了issue，估计不会添加这个，毕竟应用场景不是很广

issue地址
。。。
上午提的，下午就被关闭了，理由是可以轻易的组合出。
这样我会发布npm包，以便小范围的使用，因为确实很需要