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

Question

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

问题是,一旦在提交表单CommentForm,我想改变this.state.comments的Comments部分.我很熟悉确保将状态冒泡到一个共同的父组件的想法,但是目前,这两个组件没有共同的父组件(或任何父组件).

所以,由于免责声明我一直在学习React 2天而且很可能很困惑,克服这类问题的最佳做法是什么？我看到的选项:

• 将整个rails视图重写为单个父组件,其中两个组件为下面的子组件.这听起来并不好玩 - 页面上两个组件之间的很多rails助手都会产生很多html
• 使用Redux创建一个在两个组件之间共享的存储(???)
• 以某种方式创建父组件,同时仍然在页面的不同部分呈现其他两个组件(？)
• Comment从内部CommentForm或某些共享资源(例如:window范围)访问的状态属性,根据我的有限理解,它不是React Way

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

Answer 1

第一种选择只是做反应方式(没有外部库).如果您的项目不是那么大,可能是一个解决方案.

绝对不是第三种和第四种选择.

就你所说,使用Redux似乎是最简单的解决方案.

该Comments组件时,应绘制在全局存储中的所有意见和CommentForm应该添加评论商店(也可能为节省服务器端也发送一个AJAX请求).

然后,这些组件将共享相同的内容,Provider并且可以访问同一个商店.

我建议你看Dan的课程