从组件外部的html按钮调用store.dispatch

Question

On my screen I have two columns, the left hand column is a list of transations, the right hand column shows details of the last transaction you clicked on in the list on the left. 在我的屏幕上，我有两列，左列是交易列表，右列显示了您在左侧列表中单击的最后一笔交易的详细信息。

The details are populated in response to a redux action ONE_TRANS_LOAD_DETAILS 响应于Redux操作ONE_TRANS_LOAD_DETAILS填充详细信息

I generate the list on the left using html, without using React. 我使用html而不使用React来生成左侧的列表。 I want to add an onClick event to dispatch an action with type='ONE_TRANS_LOAD_DETAILS'. 我想添加一个onClick事件以分派类型为'ONE_TRANS_LOAD_DETAILS'的动作。

I could do this IF the left hand list was also a rect component, but am having trouble getting access to the store to call the store.dispatch({type:'ONE_TRANS_LOAD_DETAILS', transId: 55}); 如果左侧列表也是rect组件，则可以执行此操作，但是无法访问商店以调用store.dispatch（{type：'ONE_TRANS_LOAD_DETAILS'，transId：55}）;

In my html list on the left, I have <div class='row' onClick="store.dispatch({ type: 'ONE_TRANS_LOAD_DETAILS',transId: {{ $trans->id }} }))"> (I am using laravel with a blade template to generate this html) 在左侧的html列表中，我有<div class='row' onClick="store.dispatch({ type: 'ONE_TRANS_LOAD_DETAILS',transId: {{ $trans->id }} }))">我使用带有刀片模板的laravel生成此html）

I have set the store as an export in my application root code (footer.js): 我已经在应用程序根代码（footer.js）中将商店设置为导出：

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducer';
import TransDetails from "./components/TransDetails";
export const store = createStore(reducer);
require('./components/Allocations.js');

if (document.getElementById('allocations')) {
    render(
        <Provider store={store}>
            <TransDetails />
        </Provider>,
        document.getElementById('allocations')
    );
}

So how to ensure store is set to the redux store available to the html list on the left? 那么如何确保store设置为可用于左侧html列表的redux存储呢？

I have tried: 我努力了：

1) putting the export in the javascript file named 'money.js' that webpack builds for me and I import in the html header thus: <script src="js/money.js"></script> money.js: 1）将导出文件放到webpack为我构建的名为“ money.js”的javascript文件中，然后导入html标头： <script src="js/money.js"></script> money.js：

require('./bootstrap');
import { store } from './footer.js';

but I get 'store is not defined' when I try and use it in the html list 但是当我尝试在html列表中使用它时，我得到“未定义存储”

2) SO I tried a script tag in the body: 2）因此，我尝试了在体内的脚本标签：

</head>
<body>
<script>
import { store } from './footer.js';
</script>
...

but I get 'SyntaxError: Unexpected token {' at the import { store } line 但我在导入{存储}行中收到“ SyntaxError：意外令牌{”

3) I have tried putting the import in the head: 3）我尝试将导入放在首位：

<script>
import { store } from './footer.js';
</script>

But I also get unexpected token error. 但我也会收到意外的令牌错误。

4) (Thanks @MTCoatser) I made accessStore be processed by webpack to ensure compatibility: New javascript file storeAccess: 4）（感谢@MTCoatser）我使accesspack由webpack处理以确保兼容性：新的javascript文件storeAccess：

import reducer from './reducer';
import { createStore } from 'redux';
var store = createStore(reducer);

And new line in laravel mix (webpack wrapper) .react('resources/js/storeAccess.js','public/js') 和laravel mix（webpack wrapper）中的新行.react('resources/js/storeAccess.js','public/js')

and added <script src="js/storeAccess.js"></script> to head of html 并将<script src="js/storeAccess.js"></script>到html的头部

Removed store definition from footer.js: 从footer.js中删除了商店定义：

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import Allocations from "./components/Allocations";

require('./components/Allocations.js');

if (document.getElementById('allocations')) {
    render(
        <Provider store={store}>
            <Allocations />
        </Provider>,
        document.getElementById('allocations')
    );
}

and as this is loaded after storeAccess.js, the store should be available to that code anyway. 并且由于此代码是在storeAccess.js之后加载的，因此无论如何该代码商店都应该可以使用。

and get store is not defined at onClick="store.dispatch in the html body. 并且在html正文的onClick =“ store.dispatch中未定义获取商店。

BUT Still get "store is not defined" at the store.dispatch line. 但是仍然在store.dispatch行获得“未定义存储”。

In fact If I console.log(store) in the head, it is also undefined: 实际上，如果我将console.log（store）放在头部，则它也是未定义的：

...
<script src="js/storeAccess.js"></script>
<script>console.log("In head",store)</script> <-- throws store is not defined
</head>

I hope this is just a javascript scope or formatting question! 我希望这只是一个JavaScript范围或格式问题！ Help! 救命！

Answer 1

I ended up using the global window object. 我最终使用了全局窗口对象。 In my html: 在我的html中：

<div class='row transactionRow' onClick="window.storeGlobal.dispatch({type:'foo',payload:'bar'});"

and define window.storeGlobal in storeAccess.js: 并在storeAccess.js中定义window.storeGlobal：

storeAccess.js: storeAccess.js：

import { createStore } from 'redux';
window.storeGlobal = createStore(reducer);

storeAccess gets webpacked via laravel mix webpack.mix.js: 通过laravel mix webpack.mix.js将storeAccess打包到网络上：

webpack.mix.js: webpack.mix.js：

mix.react('resources/js/money.js', 'public/js')
   .react('resources/js/footer.js','public/js')
   .react('resources/js/storeAccess.js','public/js')
   .sass('resources/sass/money.scss', 'public/css');

I messed around for a while trying to export the var store variable with a statement like export store; 我搞乱了一段时间，试图用诸如export store;类的语句export store; var store变量export store; in the stroeAccess.js but I could not work out how to import it in a way that would work across browsers. 在stroeAccess.js中，但是我不知道如何以跨浏览器工作的方式导入它。 The above worked so I ran with it. 上面的工作，所以我跑了。

从组件外部的html按钮调用store.dispatch

问题描述

1 个解决方案

解决方案1
0 2019-02-16 23:58:01

从组件外部的html按钮调用store.dispatch

问题描述

1 个解决方案

解决方案1 0 2019-02-16 23:58:01

解决方案1
0 2019-02-16 23:58:01