Redux + React-Router 不渲染答案

【问题标题】：Redux + React-Router doesn't renderRedux + React-Router 不渲染
【发布时间】：2016-02-22 12:37:03
【问题描述】：

所以我有相当标准的代码，但仍然无法正常工作。这里有什么问题？

我尝试了这个解决方案，因为我有同样的错误：solution，但没有成功。我在浏览器控制台中的错误仍然是：

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.

我的代码是：

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

__________更新______________ 还请看cmets，真的很有用的资料

【问题讨论】：

如果你使用 React > 0.14，你不应该再使用 {() => } 包装器了。
你是对的，我已经偶然发现它并得到了同样的结果
@Mike 我没有错误，但this.props.options 仍然未定义
使用这一行：const store = createStore(reducer, options); 您将商店设置为等于“someTxt”。如果使用 ES6 (createStore(reducer, {options})) 或 createStore(reducer, {options: options})) 中的正确对象键，则需要添加花括号
啊哈哈，我想我明白了。您正在调用 connect() 而不将其分配给任何东西。将Index 重命名为IndexContainer，然后执行var Index = connect(mapStateToProps)(IndexContainer);。将component={Index} 保留在<Route/> 中。

标签： javascript reactjs react-router redux

【解决方案1】：

Provider 是react-redux 模块的一部分；不是全部。

您需要从

更改您的 require 语句

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

到

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

或使用 ES6 模块语法

import { Provider } from 'react-redux';

【讨论】：

谢谢，它有效。我的意思是，现在错误完全改变了）

【解决方案2】：

当你使用带括号的箭头函数时，你的函数返回对象是不一样的。大括号表示函数体（因此您必须在其中使用 return 语句）。应该是这样的：

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

【讨论】：

我相信正确的语法是test: () => ({type: 'TEST_ACTION'})，但我可能是错的。