CODEWITHSUNDEEP
javascriptreactjsreact-routerredux
Battle_Slug
Battle_Slug

Reputation: 2105

Redux + React-Router doesn't render

So I have pretty standard code which is still doesn't work. What's wrong here?

I tried this solution as I have the same errors: solution, but of no success. my errors in browser console still are:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

My code is:

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var createBrowserHistory = require('history/lib/createBrowserHistory');
var createStore = require('redux').createStore;
var Provider = require('react-redux');
var connect = require('react-redux').connect;

var options = 'someTxt';

var reducer = function (state = {}, action) {
    console.log('reducer was called with state', state, 'and action', action)
    return state;
};

const store = createStore(reducer, options);

function mapStateToProps(state) {
    return {options: state.options};
};

var Index = React.createClass({
    render: function () {
        return (
            <div>
                {this.props.options}
            </div>
        );
    }
});

connect(mapStateToProps, {
    test: () => { type: 'TEST_ACTION' }
})(Index);

ReactDOM.render(
    <Provider store={store}>
        {() =>
            <Router history={createBrowserHistory()}>
                <Route path="/" component={Index}/>
            </Router>}
    </Provider>,
    document.getElementById("container")
);

__________UPDATE__________ Please also read comments, there are really useful information

Upvotes: 1

Views: 736

Answers (2)

Clarkie
Clarkie

Reputation: 7550

Provider is part of the react-redux module; not all of it.

You need to change your require statement from 

var Provider = require('react-redux');

to

var Provider = require('react-redux').Provider;

or with ES6 module syntax

import { Provider } from 'react-redux';

Upvotes: 3

Kreozot
Kreozot

Reputation: 1576

When you use arrow functions with bracets it's not the same that your function returns object. The bracets means function body (so you must use return statement in it). Here is how it suppose to be:

connect(mapStateToProps, {
    test: () => {return { type: 'TEST_ACTION' }}
})(Index);

Upvotes: 0

Related Questions