使自治的 React / Redux 组件可嵌入和可分发答案

【问题标题】：Make an autonomous React / Redux Component embeddable and distributable使自治的 React / Redux 组件可嵌入和可分发
【发布时间】：2016-11-17 21:14:09
【问题描述】：

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

作为独立组件嵌入到常规网页中，其中组件本身位于 React 应用程序的根目录。
嵌入在更大的 React 应用中，其中 <Provider> 和 Redux 存储已由使用者在其应用的根目录中创建。

由于 Redux 要求在应用的根目录下创建 <provider> 和 store，我如何分发组件以便它可以双向使用？

【问题讨论】：

标签： reactjs webpack redux

【解决方案1】：

这很有趣。但是作为一个想法，为什么不让消费者能够将您的组件reducer 放入商店。当他想要集成您的组件时，只需让他能够提供您的组件可以获得的密钥道具来自。

例如，消费者创建他的 store reducer：

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

然后将reducer的key传给你的组件：

<YourComponent stateKey="externalComponent" />

在您的组件中，您可以使用 ownProps 并检查 stateKey 是否存在：

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

这将提供一种使您的组件可分发的简单方法，并为您的消费者带来一点配置开销，但事实上，如果他们使用 Redux，这应该是小菜一碟。

作为结论

为什么需要提供单独的商店？它将产生更多的头痛和编程开销。您只需要将您的reducer 包含在您的消费者的appStore 中即可。

注意事项

你的 ACTION_TYPES 对整个商店来说都是全局的，但是如果你给它们一个前缀，例如把它们写到 README 中，那就没那么糟糕了，因为你的消费者可以在你的组件之外调用它们，如果需要的话。

【讨论】：

您能解释一下前缀 ACTION_TYPES 是什么意思或提供一个例子吗？

【解决方案2】：

让您的组件检查context 是否包含store passed on by Provider。

如果是这种情况，请应用您的 Redux 特定逻辑。
如果不是这种情况，请管理您自己的本地状态，但确实为父级提供传入 props 对象处理程序的可能性，以便在需要交换数据时通知父级。

【讨论】：