react-redux无法找到'存储'...定制刮刮gui

Question

我已经按照实现scratch-www的方式来定制我自己的scratch3.0嵌入式web。

我只是想把我的起始页面设置为临时编辑器，但是在给出所有提供者（商店提供者和Intl-provider）后，代码给了我'找不到'商店'...错误'

无法在“Connect（LocalizationWrapper）”的上下文或道具中找到“store”。将根组件包装在一个或显式传递“store”作为“Connect（LocalizationWrapper）”的prop。

上面提到的LocalizationWrapper是scratch-gui库中的HOC。我已经在下面附上了我的代码，有人可以帮助解决我的情况吗？

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

您需要在GUI上调用AppStateHOC，它会在GUI上创建单独的存储并包装Provider。 AppStateHOC也是从scratch-gui模块导出的，你可以看到详细的源代码。

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

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