У меня на экране два столбца, левый столбец - это список переходов, правый столбец показывает подробную информацию о последней транзакции, по которой вы щелкнули, в списке слева.
Подробностизаполняется в ответ на избыточное действие ONE_TRANS_LOAD_DETAILS
Я создаю список слева, используя HTML, без использования React.Я хочу добавить событие onClick для отправки действия с type = 'ONE_TRANS_LOAD_DETAILS'.
Я мог бы сделать это, если левый список также был компонентом прямоугольной формы, но у меня возникли проблемы с доступом к хранилищу для вызоваthe 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-список слева?
Я попытался:
1) поместить экспорт в файл javascript с именем «money.js», который мне создает веб-пакет, и я импортирую в заголовок html.таким образом: <script src="js/money.js"></script> money.js:
require('./bootstrap');
import { store } from './footer.js';
но я получаю 'хранилище не определено', когда я пытаюсь использовать его в списке html
2) ТАК Я попробовал скрипттег в теле:
</head>
<body>
<script>
import { store } from './footer.js';
</script>
...
но я получаю 'SyntaxError: неожиданный токен {' встрока импорта {store}
3) Я попытался поместить импорт в заголовок:
<script>
import { store } from './footer.js';
</script>
Но я также получаю неожиданную ошибку токена.
4) (Спасибо@MTCoatser) Я сделал accessStore обработанным в веб-пакете для обеспечения совместимости: новый магазин javascript fileAccess:
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, хранилище должно быть доступно для этого кода в любом случае.
и get store не определено в onClick = "store.dispatch в теле html.
НО по-прежнему get" store не определено "в строке store.dispatch.
На самом деле, если я сохраняю в голове console.log (store), он также не определен:
...
<script src="js/storeAccess.js"></script>
<script>console.log("In head",store)</script> <-- throws store is not defined
</head>
Я надеюсь, что это просто вопрос или форматирование javascript!Помогите!