Redux + React-router 组件不渲染

Question

所以我正在尝试使用 Redux 配置 React-router 我已经使用 this example 设置了一个基本应用程序。

当我尝试渲染我的组件时，出现 1 个错误和 2 个警告。

错误是：Uncaught TypeError: Cannot read property 'toUpperCase' of undefined。

警告 #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).

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

我刚得到两个简单的组件。一个 Root 组件和一个 Container 组件来测试是否一切正常。

根组件的内容：

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

容器组件的内容：

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

以防万一-reducer的内容还有：

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

Answer 1

我看到的一个问题是您传递给 Container 组件中的 connect 函数的第二个参数。您正在传递一个对象。根据 the documentation，如果您传递一个对象，它会期望该对象的属性是动作创建者（即函数）。所以它可能看起来像这样：

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

然后将属性添加到名为 test 的道具中，这将是一个您可以调用以调度测试操作的函数。

Redux + React-router 组件不渲染

Redux + React-router component not rendering

javascript

reactjs

react-router

redux