javascript - Redux无法将存储传递给React组件

我已经定义了Redux存储，它在测试中似乎运行良好。但是，我无法正确地将store传递给React组件的props。
我正在使用CDN调用将所需的库加载到页面中，然后从单个JavaScript文件加载所有组件。

加载的库

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/redux@4.0.1/dist/redux.js"></script>
<script crossorigin src="https://unpkg.com/react-redux@6.0.0/dist/react-redux.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

我的JavaScript库

<script src="js/reactComponents.js" type="text/babel"></script>

编码

(function () {
    "use strict";
    //DEFINE STORE - REDUX
    const { Component } = React;
    const { Provider, connect } = ReactRedux;
    //REDUX ACTIONS
    const ADD_RESOURCE = "ADD_RESOURCE";
    // REDUX ACTION CREATORS
    function addResource(payload) {
        return {type: ADD_RESOURCE, payload};
    }
    // REDUX - INITIAL STATE FOR REDUCER
    const initialState = {
        resources: []
    };
    // REDUX REDUCER
    function rootReducer(state = initialState, action) {
        if (action.type === ADD_RESOURCE) {
            return Object.assign({}, state, {
                resources: state.resources.concat(action.payload)
            });
        }
        return state;
    };
    // Redux Store
    const store = Redux.createStore(rootReducer);
    //REACT - REDUX CONNECTORS
    function mapDispatchToProps(dispatch) {
        return {
            addArticle: article => dispatch(addResource(article))
        };
    }
    const mapStateToProps = state => {
        return { resources: state.resources };
    }

    //REACT CODE
    class Eresources extends Component {
        constructor(props) {
            super(props);
        }

        render() {
            console.log(this);
            this.props.addResource({ title: 'Sample title', id: 1 });
            return (
            <div></div>
            );
        }
    }
    const Filtering = connect(mapStateToProps, mapDispatchToProps)(Eresources);
    ReactDOM.render(<Provider store={store}><Eresources/></Provider>, document.getElementById("eresources"));

})();

调用this.props.addResource返回此错误。

Uncaught TypeError: this.props.addResource is not a function
    at Eresources.render (<anonymous>:454:28)
    at finishClassComponent (react-dom.development.js:14661)
    at updateClassComponent (react-dom.development.js:14616)
    at beginWork (react-dom.development.js:15462)
    at performUnitOfWork (react-dom.development.js:18277)
    at workLoop (react-dom.development.js:18317)
    at renderRoot (react-dom.development.js:18403)
    at performWorkOnRoot (react-dom.development.js:19292)
    at performWork (react-dom.development.js:19204)
    at performSyncWork (react-dom.development.js:19178)

进一步研究this值，很明​​显商店没有通过：

props:
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

为什么store没有通过？ mapDispatchToProps有什么问题吗？或者我缺少应该包含的任何库？

最佳答案

用<Eresources/>替换此行中的<Filtering/>

ReactDOM.render(<Provider store={store}><Eresources/></Provider>, document.getElementById("eresources"));

并在组件中将this.props.addResource替换为this.props.addArticle：

class Eresources extends Component {
        constructor(props) {
            super(props);
        }

        render() {
            console.log(this);
            this.props.addArticle({ title: 'Sample title', id: 1 });
            return (
            <div></div>
            );
        }
    }
}

只有包装在connect中的组件才能访问存储数据。而且它只能通过mapStateToProps和mapDispatchToProps给定的props访问