如何使用 react_on_rails 的 Redux API 为商店补充水分?
Posted
技术标签:
【中文标题】如何使用 react_on_rails 的 Redux API 为商店补充水分?【英文标题】:How do you hydrate a store using react_on_rails' Redux API? 【发布时间】:2019-07-14 12:59:52 【问题描述】:目前,我正在使用此设置(为便于阅读而进行了简化):
react_on_rails 11.1.4
布局控制器(索引方法):
redux_store('appStore', props: foo: 'bar' )
布局:
<%= redux_store_hydration_data %> (before close of body tag)
查看:
<%= react_component('FooBar') %>
组件(FooBar):
ReactOnRails.getStore('appStore');
javascript (main.js):
ReactOnRails.registerStore( appStore );
如果我检查源,数据和组件似乎存在:
<div id="FooBar-react-component-fb8d03cb-b3d3-4247-8b4b-3e5a2ad52f84"></div>
<script type="application/json" class="js-react-on-rails-component" data-component-name="FooBar" data-trace="true" data-dom-id="FooBar-react-component-fb8d03cb-b3d3-4247-8b4b-3e5a2ad52f84"></script>
<script src="/main.js"></script>
<script type="application/json" data-js-react-on-rails-store="appStore">"foo":"bar"</script>
但是,由于这些致命错误,组件本身没有呈现:
Uncaught Error: There are no stores hydrated and you are requesting the store appStore...`
Uncaught Error: Could not find store registered with name 'appStore'. Registered store names include...
据我所知,设置与文档中概述的内容一致,所以我想知道这是否是某种错误。我尝试在控制器和视图中都调用redux_store
,将其他调用移动到其他文件和位置等,但无济于事。
非常感谢任何帮助,在此先感谢!
【问题讨论】:
【参考方案1】:我遇到了完全相同的问题。这就是我解决它的方法。最初,我有这个
const appStore = ReactOnRails.getStore("myStore");
const HelloWorldApp = (appStore) => (
<Provider store=appStore>
<HelloWorldContainer />
</Provider>
);
export default HelloWorldApp;
但是这里注册商店失败
const appStore = ReactOnRails.getStore("myStore");
所以我改成了这个
import React from 'react';
import Provider from 'react-redux';
import HelloWorldContainer from './HelloWorldContainer';
const HelloWorldApp = (props) => (
<Provider store=ReactOnRails.getStore("myStore")>
<HelloWorldContainer />
</Provider>
);
export default HelloWorldApp;
“没有水合的商店”这件事有点误导。 “水合”商店只是一个填充对象。当您查看您的 html 时,您确实有一个水合商店,它只是没有被 JS 找到。我相信在这里添加 ReactOnRails.getStore
<Provider store=ReactOnRails.getStore("myStore")>
有助于加载顺序。我相信它最初对我不起作用的原因是因为 JS 加载顺序。我希望这对某人有所帮助。
【讨论】:
以上是关于如何使用 react_on_rails 的 Redux API 为商店补充水分?的主要内容,如果未能解决你的问题,请参考以下文章
当通过 NVM 安装 NPM 时,Capistrano 部署失败并出现 react_on_rails
如何将 red5recorder 与 red5 服务器或 wowza 流服务器一起使用?