将redux与vanilla js结合使用,如何在不传递给每个组件的情况下访问它?

我在一个普通的js项目中使用redux。我有一堆小的模块化ui文件和控制器等等。在那些ui文件中,我可能有如下代码:

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

问题是,我有很多这样的简单视图文件,其中许多是嵌套的,我发现它很难看,而且很容易出错,将存储作为参数传递给所有内容。

例如,为了简洁起见,我对其进行了裁剪,但是表单组件具有表单元素组件,如textarea。目前我看到了两种管理商店的方法:

1. 设置为 window 在我的条目文件(index.js)中创建它,然后访问 Store 全球地。这看起来是最好的,虽然不是“最佳实践”,并且使单元测试和服务器端呈现更加困难。

2. 传递给 每一个 沉闷地组成。这是我上面的例子。我认为这是“最佳实践”,但对几乎所有的文件都这样做是很烦人的。

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