Reactjs 使自主React/Redux组件可嵌入和分发

我正在构建一个React组件，该组件将通过npm分发。组件使用Redux作为其状态，并具有以下用例：

作为独立组件嵌入到常规网页中，其中组件本身位于React应用程序的根目录下

嵌入到一个更大的React应用程序中，其中消费者已经在其应用程序的根目录下创建了一个

和Redux商店

---

由于Redux要求在应用程序的根目录下创建一个

和一个存储区，因此我如何分发该组件以使其可以双向使用？

让您的组件检查是否包含

• 如果是这种情况，则应用特定于Redux的逻辑
• 如果不是这样，请管理您自己的本地状态，但确实可以让父级传入

  props

  对象处理程序，以便在需要交换数据时通知父级

---

这很有趣。但是，作为一个想法，为什么不让消费者能够将您的组件

减速机

放到商店里呢。。当他想要集成你的组件时，只要给他提供关键的能力，你的组件就可以从中获得道具
例如，消费者创建其商店减速机：

var rootReducer = combineReducers({
   someStuffReducer,
   externalComponent: yourComponentReducer
})

然后将减速器的键传递给部件：

<YourComponent stateKey="externalComponent" />

这将提供一种使组件可分发的简单方法，为您的消费者提供一点配置开销，但事实上，如果他们使用Redux，这应该是小菜一碟
作为结论
为什么你需要提供一个单独的商店？它将产生更多的头痛和编程开销。您只需要将您的

减速机

，包含在消费者的

应用商店

中即可
注释

---

您的操作类型对整个商店来说都是全局的，但是如果您给它们一个前缀，并将它们写入自述文件，那么就没有那么糟糕了，因为如果需要，您的消费者可以在组件之外调用它们。
您能解释一下您所说的操作类型前缀是什么意思，或者提供一个示例吗？

// YourComponent mapStateToProps
function mapStateToProps(state, ownProps) {
  let stateKey = ownProps.stateKey || "yourDefaultKey" // or some logic.. you got the idea
  return {
    myComponentsState: state[stateKey]
  };
}