Question

我正在香草JS项目中使用Redux。我有一堆小型模块化UI文件和控制器等。在这些用户界面文件中，我可能会有类似的代码：

const ExampleForm = function (StoreInstance) {
  return $('<form />', {
    submit: () => {
      StoreInstance.dispatch({
        type: 'EXAMPLE_DISPATCH',
        post: {
          message: $TextareaComponent.val()
        }
      })
      return false
    }
  })
}

问题是我有很多像这样的简单视图文件，并且它们很多都是嵌套的，而且我发现它丑陋且容易出错，因此将商店作为参数传递给所有东西。

例如，为简洁起见，我对其进行了修剪，但表单组件具有诸如textarea之类的表单元素组件。目前，我看到两种管理商店的选项：

在我的条目文件（index.js）中创建它时将其设置为window，然后仅全局访问Store。这似乎是最好的方法，虽然不是“最佳实践”，但是这会使单元测试和服务器端渲染更加困难。
单调乏味地将其传递给每个组件。这是我上面的例子。我认为这是“最佳实践”，但是几乎对您制作的每个文件都感到很烦。

我想知道传递商店实例是否有其他选择或技巧。我倾向于将其全球化。

Answer 1

您可以使用构造函数模式并将每个视图创建为Node。 ConnectedView将具有存储的存储实例（视图中的new ConnectedView()），因此它不必是全局的。

结合使用Redux和Vanilla JS，如何在不将其传递给每个组件的情况下实现它？

1 个答案: