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

问题描述 投票:0回答:1

在我的屏幕上,我有两列,左侧列是转换列表,右侧列显示您在左侧列表中单击的最后一个事务的详细信息。

将填充详细信息以响应redux操作ONE_TRANS_LOAD_DETAILS

我使用html在左边生成列表,而不使用React。我想添加一个onClick事件来调度type ='ONE_TRANS_LOAD_DETAILS'的动作。

如果左手列表也是一个rect组件,我可以这样做,但是无法访问商店来调用store.dispatch({type:'ONE_TRANS_LOAD_DETAILS',transId:55});

在我左边的html列表中,我有<div class='row' onClick="store.dispatch({ type: 'ONE_TRANS_LOAD_DETAILS',transId: {{ $trans->id }} }))">(我正在使用带有刀片模板的laravel来生成此HTML)

我已将商店设置为我的应用程序根代码(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')
    );
}

那么如何确保store设置为左侧html列表中可用的redux存储?

我试过了:

1)将导出​​放在webpack为我构建的名为'money.js'的javascript文件中,然后导入html标头:<script src="js/money.js"></script> money.js:

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

但是当我尝试在html列表中使用它时,我得到'store is not defined'

2)所以我在体内尝试了一个脚本标签:

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

但是我在import {store}行得到'SyntaxError:Unexpected token {'

3)我已经尝试将导入放入头部:

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

但我也得到意外的令牌错误。

4)(感谢@MTCoatser)我使webpack处理了accessStore以确保兼容性:新的javascript文件storeAccess:

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

laravel mix(webpack wrapper).react('resources/js/storeAccess.js','public/js')的新系列

并将<script src="js/storeAccess.js"></script>添加到html的头部

从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')
    );
}

并且当它在storeAccess.js之后加载时,该商店应该可用于该代码。

并且未在html正文中的onClick =“store.dispatch中定义获取存储。

但仍然在store.dispatch行获取“store not defined”。

实际上如果我在head.log(store)的头部,它也是未定义的:

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

我希望这只是一个javascript范围或格式问题!救命!

javascript reactjs redux
1个回答
0
投票

我最终使用了全局窗口对象。在我的HTML中:

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

并在storeAccess.js中定义window.storeGlobal:

storeAccess.js:

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

storeAccess通过laravel mix webpack.mix.js获取webpacked:

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');

我试图在stroeAccess.js中使用类似var store的语句导出export store;变量一段时间,但我无法解决如何以跨浏览器工作的方式导入它。以上工作,所以我跑了。

© www.soinside.com 2019 - 2024. All rights reserved.