为函数的每个实例创建唯一的存储值
Posted
技术标签:
【中文标题】为函数的每个实例创建唯一的存储值【英文标题】:Make a unique store value for each instance of a function 【发布时间】:2021-11-19 03:56:15 【问题描述】:我正在尝试为创建的每个函数实例创建一个唯一的存储值,但由于某种原因,我创建的每个函数实例都使用相同的存储值。
我正在创建一个简单的 store 函数,然后在函数内部创建 store。但是,即使在函数的每个实例中都创建了存储,它们也被共享。为什么会这样。
这是一个代码框Sandbox
这里是代码
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
【问题讨论】:
【参考方案1】:看起来问题在于您正在导入的 initialState
是您用来启动商店状态的共享引用。所以问题不在于您的商店代码是否正确解耦(似乎是),而是您正在操作相同的底层引用对象initialState
。
修正方法 1
您可以通过克隆/复制 initialState
而不是直接使用其引用来解决此问题。
这是一个使用 lodash 的示例:
import cloneDeep from 'lodash';
/* ... */
const store = createStore(cloneDeep(initialState));
这是该方法的代码框: 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
【讨论】:
非常感谢。我刚刚复制了createStore(...initialState)
之类的对象。我很难理解为什么会发生这种情况,所以谢谢。我真的很感激。以上是关于为函数的每个实例创建唯一的存储值的主要内容,如果未能解决你的问题,请参考以下文章