Estoy tratando de crear un valor de almacenamiento único para cada instancia de una función que se crea, pero por alguna razón, cada instancia de la función que creo usa el mismo valor de almacenamiento.
Estoy creando una función de tienda simple y luego creando la tienda dentro de la función. Pero a pesar de que las tiendas se crean en cada instancia de la función, se comparten. Por qué pasó esto.
Aquí hay un sandbox de codesandbox
Aquí está el código
createStore.js
const createStore = (initialState) => { const state = initialState; const get = () => state; const set = (key, value) => (state[key] = value); return { get, set }; }; export default createStore;Función principal
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;Luego estoy tratando de usarlos creando múltiples instancias del controlador de esta manera:
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 ctl2Parece que el problema es que tu initialState que estás importando es una referencia compartida que estás usando para iniciar el estado de tu tienda. Entonces, el problema no es tanto que el código de su tienda esté desacoplado correctamente (parece estarlo), sino que está manipulando el mismo objeto subyacente al que se hace referencia initialState .
Es probable que pueda solucionar esto clonando/copiando initialState en lugar de usar directamente su referencia.
Aquí hay un ejemplo de cómo se vería eso con lodash:
import { cloneDeep } from 'lodash'; /* ... */ const store = createStore(cloneDeep(initialState));Aquí hay un codesandbox para ese enfoque: https://codesandbox.io/s/modern-frog-npd2w
Otra alternativa que podría considerar es no tener un módulo singleton compartido de initialState y, en cambio, hacer que sea una función de fábrica para crear ese estado inicial, lo que también resolvería el mismo problema:
import { createInitialState } from './initialState'; /* ... */ const initialState = createInitialState(); const store = createStore(initialState);Aquí hay un codesandbox para ese enfoque: https://codesandbox.io/s/charming-greider-5go5t