反应新手：在未链接的组件之间共享状态

Question

我是一个React新手试图将React集成到Rails站点。我在页面/ html的最顶部有一个CommentForm组件，在同一页面的底部有一个Comments组件。目前，两者都是通过React-On-Rails＆＃39; react_component方法。

问题是，在CommentForm提交表单后，我想更改this.state.comments组件中的Comments。我熟悉确保国家冒充共同的父母组成部分的想法，但目前，这两个组成部分没有共同的父母（或任何父母）。

所以，由于免责声明我已经学习React 2天而且可能非常困惑，克服这类问题的最佳做法是什么？我看到它们的选项：

• 将整个rails视图重写为单个父组件，其中两个组件为下面的子组件。这听起来并不有趣 - 网页上两个组件之间的很多铁路助手都会产生大量的HTML
• 使用Redux创建在两个组件（???）
之间共享的商店
• 以某种方式创建父组件，同时仍然在页面的不同部分呈现其他两个组件（？）
• 从Comment或某些共享资源（例如：CommentForm范围）中访问window个州的属性，根据我的有限理解，这些属性并非如此反应方式

我猜这是一个常见问题，但我不确定解决它的一般智慧是什么。任何想法都赞赏。

Answer 1

第一个选项是仅反应方式（没有外部库）。如果您的项目不是那么大，那么可能就是一个解决方案。

第三和第四种选择绝对不是要走的路。

对于你所说的，使用Redux似乎是最简单的解决方案。

Comments组件应该在全局商店中绘制所有注释，CommentForm应该将注释添加到商店（并且可能还发送一个AJAX请求以保存服务器端）。

然后，这些组件将共享相同的Provider，并且可以访问同一个商店。

我建议你看Dan's Course

Answer 2

Redux是老实说的完美用例。实施起来并不需要太长时间，但如果你还没有完成它，那么在你需要一两天的时间来完成它之前。

通常，随着项目的增长，您将更容易管理一个州，而不是一千个组件范围的州。

所以，如果你有更多这样的情况，或者你必须通过3个以上的组件传递道具的情况。我现在要实现Redux并成为未来的证明。