在[https://jscomplete.com/repl/]中使用[Redux connect]

Question

我正在尝试运行教程中的代码

https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react#understanding-redux-4

上

https://jscomplete.com/repl/

，但执行失败，出现以下错误：

ReferenceError: connect is not defined

我尝试在文件顶部使用import语句：

import { connect } from 'react-redux';

但它没有帮助解决错误。

我对jscomplete工作方式的理解是否有问题？任何解释都有助于TIA

更新：按要求粘贴代码：

import { connect } from 'react-redux';
class ItemList extends React.Component {



    componentDidMount() {
        this.props.fetchData('https://5826ed963900d612000138bd.mockapi.io/items');
    }

    render() {
        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }

        return (
            <ul>
                {this.props.items.map((item) => (
                    <li key={item.id}>
                        {item.label}
                    </li>
                ))}
            </ul>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        items: state.items,
        hasErrored: state.itemsHasErrored,
        isLoading: state.itemsIsLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(itemsFetchData(url))
    };
};

connect(mapStateToProps, mapDispatchToProps)(ItemList)

 function itemsHasErrored(bool) {
    return {
        type: 'ITEMS_HAS_ERRORED',
        hasErrored: bool
    };
}

 function itemsIsLoading(bool) {
    return {
        type: 'ITEMS_IS_LOADING',
        isLoading: bool
    };
}

 function itemsFetchDataSuccess(items) {
    return {
        type: 'ITEMS_FETCH_DATA_SUCCESS',
        items
    };
}

function itemsFetchData(url) {
    return (dispatch) => {
        dispatch(itemsIsLoading(true));

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                dispatch(itemsIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((items) => dispatch(itemsFetchDataSuccess(items)))
            .catch(() => dispatch(itemsHasErrored(true)));
    };
}

 function itemsHasErrored(state = false, action) {
    switch (action.type) {
        case 'ITEMS_HAS_ERRORED':
            return action.hasErrored;

        default:
            return state;
    }
}

function itemsIsLoading(state = false, action) {
    switch (action.type) {
        case 'ITEMS_IS_LOADING':
            return action.isLoading;

        default:
            return state;
    }
}

 function items(state = [], action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return action.items;

        default:
            return state;
    }
}

combineReducers({
    items,
    itemsHasErrored,
    itemsIsLoading
});

function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}

const store = configureStore(); // You can also pass in an initialState here

render(
    <Provider store={store}>
        <ItemList />
    </Provider>,
    document.getElementById('app')
);


ReactDOM.render(<ItemList/>,mountNode)

Answer 1

这是由于一些问题。首先，您需要设置Babel transpiler及其配置以进行反应，以便处理ES6 import语句。

看起来像jscomplete.com（和jsFiddle）并不完全支持这一点。

代码中存在一些问题，例如引用未声明的变量（例如：mountNode），但主要问题是jsComplete.com不了解import语句。

使用VS Code或类似编辑器在计算机上运行此代码会更好。

查看create-react-app，它可以在开发反应应用程序时为您解决所有这些开发设置问题。