ruby-on-rails - 您如何使用 react_on_rails 的 Redux API 为商店补充水分？

Question

目前，我正在使用此设置(为了便于阅读而进行了简化):

react_on_rails 11.1.4

布局 Controller (索引方法):

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>

但是，由于这些 fatal error ，组件本身并未呈现:

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...

据我所知，设置与文档中概述的内容一致，所以我想知道这是否是某种错误。我尝试在 Controller 和 View 中调用 redux_store，将其他调用移动到其他文件和位置等，但无济于事。

非常感谢任何帮助，提前致谢!

Answer 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 加载顺序。我希望这对某人有所帮助。