Redux не может передать хранилище компоненту React

Question

Я определил магазин Redux, который, кажется, работает нормально после тестирования.Однако я не могу правильно передать store компоненту props React.Я использую вызовы 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 или мне не хватает библиотек, которые должны быть включены?

Answer 1

Замените <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