CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Khaled
Khaled

Reputation: 8573

Redux failing to to pass store to React component

I have defined Redux store which seem to be working fine upon testing. However, I am unable to pass the store correctly to React component's props. I am using CDN calls to load required libraries into page, then loading all components from a single JavaScript file.

Loaded libraries

<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/[email protected]/dist/redux.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/dist/react-redux.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

My JavaScript repository 

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

The code

(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"));

})();

Calling this.props.addResource returns this error.

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)

And further looking into this value, it's evident that the store isn't passed:

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__()

Why isn't the store passed? Anything wrong with mapDispatchToProps or am I missing any libraries that should be included?

Upvotes: 0

Views: 88

Answers (1)

blaz
blaz

Reputation: 4068

Replace <Eresources/> in this line with <Filtering/>

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

and replace this.props.addResource with this.props.addArticle in your component:

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

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

Only components wrapped inside connect can have access to store data. And it can only access via defined props given by mapStateToProps and mapDispatchToProps

Upvotes: 1

Related Questions