Javascript Redux+；反应路由器组件不渲染

因此，我正在尝试用我用来设置基本应用程序的

Redux

配置

React router

当我尝试渲染我的组件时，我得到1个错误和2个警告

错误为：

uncaughttypeerror:无法读取未定义的属性“toUpperCase”

警告#1:

警告：React.createElement:类型不应为null或未定义。它应该是字符串（对于DOM元素）或类（对于复合组件）。

警告#2:

警告：只有函数或字符串可以作为React组件安装。

我只得到了两个简单的组件。一个

根

组件和一个

容器

组件，用于测试工作是否正常

根组件的内容：

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')
);

---

我看到的一个问题是，您正在传递给

容器

组件中的

连接

函数的第二个参数。您正在传递一个对象。根据，如果传递一个对象，它将期望该对象的属性是动作创建者（即函数）。所以它可能看起来像这样：

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

然后，这将为您的道具添加一个名为

test

的属性，该属性将是一个您可以调用以分派测试操作的函数

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;
  }
}

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