response-redux не может найти «store» ... при настройке scratch-gui

Question

Я пошел по пути создания scratch-www для настройки своего собственного встроенного веб-интерфейса scratch3.0.

Я просто хотел, чтобы моя стартовая страница была в редакторе нуля, но после выдачи всех провайдеров (провайдер магазина и Intl-провайдер) код дает мне 'не могу найти' магазин '... ошибка'

Не удалось найти "магазин" ни в контексте, ни в подпунктах "Connect (LocalizationWrapper)"».Либо оберните корневой компонент в a, либо явно передайте «store» как реквизит «Connect (LocalizationWrapper)».

Упомянутый выше LocalizationWrapper - это HOC внутри библиотеки scratch-gui.Я приложил свой код ниже, кто-нибудь может помочь с моей ситуацией, пожалуйста?

// project-view.jsx
const React = require('react');
const injectIntl = require('react-intl').injectIntl;
const GUI = require('scratch-gui');
const IntlGUI = injectIntl(GUI.default);


class Preview extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            projectId: 0
        };
    }

    render() {
        return (
            <React.Fragment>
            <IntlGUI
                projectId={this.state.projectId}
            />
            </React.Fragment>
        );
    }
}

module.exports.View = Preview;
GUI.setAppElement(document.getElementById('app'));
module.exports.initGuiState = guiInitialState => {
    return GUI.initPlayer(guiInitialState);
}
module.exports.guiReducers = GUI.guiReducers;
module.exports.guiInitialState = GUI.guiInitialState;
module.exports.guiMiddleware = GUI.guiMiddleware;
module.exports.initLocale = GUI.initLocale;
module.exports.localesInitialState = GUI.localesInitialState;

код в index.js

import React from 'react';
import ReactDOM from 'react-dom';
const redux = require('redux');
const thunk = require('redux-thunk').default;
const Provider = require('react-redux').Provider;

import * as serviceWorker from './serviceWorker';

const IntlProvider = require('react-intl').IntlProvider;
const ProjectView = require('./views/project/project-view.jsx');

    let locale = window._locale || 'en';
    const reducer = {
        ...ProjectView.guiReducers
    };

    const reducers = redux.combineReducers(reducer);

    const initState = {
        locales: ProjectView.initLocale(ProjectView.localesInitialState, locale),
        scratchGui: ProjectView.initGuiState(ProjectView.guiInitialState)
    };

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || redux.compose;
    const enhancers = composeEnhancers(
        redux.applyMiddleware(thunk),
        ProjectView.guiMiddleware
    );

    const store = redux.createStore(
        reducers,
        initState,
        enhancers
    );

    const messages = {};

    ReactDOM.render(
        <Provider store={store}> 
            <IntlProvider 
                locale={locale}
                messages={messages}
            >
                <ProjectView.View />
            </IntlProvider>
        </Provider>, document.getElementById('app'));

Answer 1

Вам нужно вызвать AppStateHOC в GUI, который создает отдельное хранилище и оборачивает провайдера в GUI.AppStateHOC также экспортируется из модуля scratch-gui, и вы можете увидеть исходный код для деталей.

import GUI, { AppStateHOC } from 'scratch-gui';

// use this instead of raw GUI
const WrappedGUI = AppStateHOC(GUI);