immer简易实现

const clone = (state) => {
    return Array.isArray(state) ? [...state] : {...state};
}

const createProxy = (getState, callback) => {
    return new Proxy({}, {
        get: function (target, property) {
            const state = getState();
            if (typeof state[property] === 'object' && state[property] !== null) {
                return createProxy(() => state[property], (fn) => {
                    callback((parent) => {
                        const copy = clone(parent[property]);
                        parent[property] = copy;
                        fn(copy);
                    });
                });
            } else {
                const state = getState();
                return state[property];
            }
        },
        set: function (target, property, value) {
            callback((parent) => {
                parent[property] = value;
            });
            return true;
        }
    });
};

const produce = (state, producer) => {
    let copy = state;
    producer(createProxy(() => copy, (fn) => {
        copy = clone(copy);
        fn(copy);
    }));
    return copy;
};

const state = {
    ref: {},
    count: {
        all: {
            a: 0,
            b: 0
        }
    },
};

const value = produce(state, draft => {
    draft.count.all.a = 1;
    draft.count.all.b = draft.count.all.a + 1;
});

console.log(state, value, state.ref === value.ref);  
const clone = (state) => {
    return Array.isArray(state) ? [...state] : {...state};
}

const createProxy = (getState, iteratorFunc) => {
    
    return new Proxy({}, {
        get: function (target, property) {
            const state = getState();
            if (typeof state[property] === 'object' && state[property] !== null) {
                const iterator = iteratorFunc();
                return createProxy(() => state[property], function* () {
                    const {value: parent} = iterator.next();
                    const copy = clone(parent[property]);
                    parent[property] = copy;
                    yield copy;
                });
            } else {
                const state = getState();
                return state[property];
            }
        },
        set: function (target, property, value) {
            const iterator = iteratorFunc();
            const {value: parent} = iterator.next();
            parent[property] = value;
            return true;
        }
    });
};

const produce = (state, producer) => {
    let copy = state;
    producer(createProxy(() => copy, function* () {
        copy = clone(copy);
        yield copy;
    }));
    return copy;
};

const state = {
    ref: {},
    count: {
        all: {
            a: 0,
            b: 0
        }
    },
};

const value = produce(state, draft => {
    draft.count.all.a = 1;
    draft.count.all.b = draft.count.all.a + 1;
});

console.log(state, value, state.ref === value.ref);  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值