函数式 javascript 并为函数的每个实例创建一个唯一的存储答案

【问题标题】：Functional javascript and creating a unique store for each instance of a function函数式 javascript 并为函数的每个实例创建一个唯一的存储
【发布时间】：2021-07-28 07:02:04
【问题描述】：

所以我想知道是否有一种技术可以创建类似于 redux 的自定义存储并将其与函数的多个实例一起使用。我目前的方法遇到了范围问题。 main 函数里面有很多函数，里面有很多函数，所以我不想真的通过多个函数传递存储，我真的很想将它导入到函数中。

问题显然是范围。如果我创建了多个控制器函数实例，它们将共享相同的存储值，并且它们彼此之间不会是唯一的。我显然可以在 main 函数中创建 store 并传递它，但是当你必须多次传递它时，这会变得乏味。

是否有某种技术可以让我为控制器函数的每个实例创建一个唯一的存储，并能够导入它而不是在整个主函数及其所有子函数中传递它？现在我在想我只是被困在通过所有功能传递商店。有谁知道一种技术可以在范围内创建商店并且仍然能够将其导入到函数中而不必传递它。

这是一个非常简单的问题示例Codesandbox。

import controller from './controller';

const button1 = document.querySelectorAll("button")[0];
const button2 = document.querySelectorAll("button")[1];

const ctl1 = controller();
const ctl2 = controller();

const displayResults = () => {
  const displays = document.querySelectorAll('p')
  displays[0].innerText = 'Controller 1 value is ' + ctl1.getValue()
  displays[1].innerText = 'Controller 2 value is ' + ctl2.getValue()
}

button1.addEventListener("click", () => {
  ctl1.setValue(ctl1.getValue() + 1);
  displayResults()
});

button2.addEventListener("click", () => {
  ctl2.setValue(ctl2.getValue() + 1);
  displayResults()
});

controller.js

import store from "./store";
import setValue from "./setValue"
import getValue from "./getValue"

const controller = () => {
  
  // I could just create the store here and pass it down to child functions but this is tedious
  // eg: const store = createStore()
  // eg: const setValue = (val) => setValue(store, val)

  // Note this is a very simple example

  return {
    getValue,
    setValue
  };
};

export default controller;

setValue.js

import store from './store'

const setValue = (val) => store.dispatch({ type: "SET", payload: val });

export default setValue

getValue.js

import store from './store'

const getValue = () => store.get();

export default getValue

store.js

const createStore = (reducer, initialState) => {
  let state = initialState;

  const get = () => state;

  const dispatch = (action) => {
    state = reducer(action, state);
  };

  return {
    get,
    dispatch
  };
};

const reducer = (action, state) => {
  switch (action.type) {
    case "SET":
      return action.payload;
    default:
      return state;
  }
};

const initialState = 0;

const store = createStore(reducer, initialState);

export default store;

【问题讨论】：

我不太确定你要的是什么，但类和方法会是解决方案吗？
@Barmar 这将是解决方案，但是当您传递商店时，您只是在使用 this 做同样的事情。我试图通过能够拆分函数并导入使它们成为纯函数的必要函数来使我的代码更易于处理，但是通过类它可以实现，因为您基本上将this 绑定到模块内部的所有内容并且它不是清楚 this 指的是什么。
一旦您习惯了编写面向对象的代码，跟踪this 就成为第二天性。使用函数式编程时，您在跟踪范围方面会遇到同样的问题。
store.js 中的export const Store = () => createStore(reducer, 0) 和controller 正文中的const store = Store() 之类的东西？
“...我真的很想将其导入函数中。”“将其导入函数”是什么意思？

标签： javascript functional-programming scope

【解决方案1】：

使用依赖注入

const controller = (store = createStore()) => {

您的问题不是范围问题。一旦商店“存在”，它就在范围内。问题是您只创建了一个商店。

【讨论】：