Question

I am trying to run the code from the tutorial in

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

on

https://jscomplete.com/repl/

, but the execution is failing with the following error:

ReferenceError: connect is not defined

I tried using an import statement at top of the file :

import { connect } from 'react-redux';

But it did not help resolve the error.

Is there something wrong in my understanding of the way jscomplete works?Any explanation would help TIA

Update : Pasting the code as requested :

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转换器及其配置以进行响应，以便处理ES6 import语句。

似乎jscomplete.com（和jsFiddle）并不完全支持这一点。

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

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

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

Using [Redux connect] in [https://jscomplete.com/repl/]

1 个答案: