CODEWITHSUNDEEP
javascriptreactjsreact-routerredux
guidsen
guidsen

Reputation: 2393

Redux + React-router component not rendering

So I'm trying to configure React-router with Redux I've used this example to setup a basic app.

When I try to render my components I get 1 error and 2 warnings.

The error is: Uncaught TypeError: Cannot read property 'toUpperCase' of undefined.

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

Warning #2: Warning: Only functions or strings can be mounted as React components.

I just got two simple component. A Root component and a Container component to test if things are working fine.

Content of the Root component: 

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createHistory } from 'history';
import { createStore, combineReducers } from 'redux';
import { Router, Route } from 'react-router';
import timeline from '../reducers/timeline';

import Container from '../components/Container';

const store = createStore(combineReducers({timeline}));

store.subscribe(() => {
  console.info(store.getState());
})

const history = createHistory();

React.render(
  <Provider store={store}>
    {() =>
      <Router history={history}>
        <Route path="/" component={Container}/>
      </Router>
    }
  </Provider>,
  document.getElementById('root')
);

Content of the Container component:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Container extends Component {
  render() {
    return (
      <div id="outter">
        Container
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log(state);

  return {
    test: state,
  };
}

export default connect(
  mapStateToProps,
  {
    type: 'TEST_ACTION',
  }
)(Container);

Just in case - the content of the reducer as well:

const initialState = [
  {id: 1, message: 'Test message'},
];

export default function timeline(state = initialState, action = {}) {
  switch (action.type) {
    case 'TEST_ACTION':
      return initialState;
    default:
      return state;
  }
}

Upvotes: 2

Views: 1671

Answers (1)

nicgordon
nicgordon

Reputation: 66

One problem I can see is in the second parameter you are passing to the connect function in the Container component. You are passing an object. According to the documentation, if you pass an object it will expect the properties of that object to be action creators (which are functions). So it might look something like this:

export default connect(
  mapStateToProps,
  {
    test: () => { type: 'TEST_ACTION' }
  }
)(Container);

That will then add a property to your props called test which will be a function that you can call to dispatch the test action.

Upvotes: 2

Related Questions