Question

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

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

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

Answer 1

这非常有趣。但是作为一个想法，为什么不让消费者能够把你的组件update_sub_field( array('media', 1, 'notes', 2, 'note'), 'Here is a new note!', $postID );放到商店里......当他想要整合你的组件时，只要让他能够在你的组件中提供密钥可以从中获取道具。

例如，消费者创建他的商店减速器：

reducer

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

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

在您的组件中，您可以使用ownProps并检查<YourComponent stateKey="externalComponent" />是否存在：

stateKey

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

作为结论

为什么需要提供单独的商店？它会产生更多头痛和编程开销。您只需要将// YourComponent mapStateToProps function mapStateToProps(state, ownProps) { let stateKey = ownProps.stateKey || "yourDefaultKey" // or some logic.. you got the idea return { myComponentsState: state[stateKey] }; }包含在消费者的reducer中，就可以了。

注释

您的ACTION_TYPES对于整个商店来说都是全局的，但如果您给他们一个前缀并将其写入自述文件，那么它并不是那么糟糕，因为您的消费者可以在您的组件之外调用它们，如果需要的话。

Answer 2

如果context包含store passed on by Provider，请检查您的组件。

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

创建一个可嵌入和可分发的自治React / Redux组件

2 个答案: