immer简易实现

weixin_52631537

已于 2023-12-12 10:57:53 修改

阅读量215

点赞数 1

文章标签：前端

于 2022-02-23 11:07:34 首次发布

本文链接：https://blog.csdn.net/weixin_52631537/article/details/123085231

版权

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);