为函数的每个实例创建一个惟一的存储值

Question

我试图为创建的函数的每个实例创建一个唯一的存储值，但由于某种原因，我创建的函数的每个实例都使用相同的存储值。

我正在创建一个简单的存储函数，然后在函数内创建存储。但是，即使在函数的每个实例中都创建了存储，它们也是共享的。为什么会这样?

这是一个codesandbox沙盒

代码

createStore.js

const createStore = (initialState) => {
const state = initialState;
const get = () => state;
const set = (key, value) => (state[key] = value);
return {
get,
set
};
};
export default createStore;

主要功能

import createStore from "./createStore";
import initialState from "./initialState";
const controller = () => {
const store = createStore(initialState);
const setStore = (key, val) => store.set(key, val);
const getStore = () => store.get().string;
return {
setStore,
getStore
};
};
export default controller;

然后我试图通过创建控制器的多个实例来使用它们，如下所示:

import controller from "./controller";
const ctl1 = controller();
const ctl2 = controller();
ctl1.setStore('string', 'Hello')
ctl2.setStore('string', 'Welcome')
clt1.getStore() // will output the last set store value of ctl2

Answer 1

看起来问题是你正在导入的initialState是一个共享引用，你正在使用它来启动你的存储状态。因此，问题不在于您的存储代码是否正确解耦(似乎是)，而在于您正在操作相同的底层引用对象initialState。

修复方法1

你可以通过克隆/复制initialState而不是直接使用它的引用来修复这个问题。

下面是lodash:

的示例

import { cloneDeep } from 'lodash';
/* ... */
const store = createStore(cloneDeep(initialState));

下面是这个方法的codesandbox:https://codesandbox.io/s/modern-frog-npd2w

修复方法2

您可以考虑的另一个替代方案是不使用initialState的共享单例模块，而是将其作为创建初始状态的工厂函数，这也将解决相同的问题:

import { createInitialState } from './initialState';
/* ... */
const initialState = createInitialState();
const store = createStore(initialState);

下面是这个方法的代码盒:https://codesandbox.io/s/charming-greider-5go5t