Redux 静默不渲染 connect()ed 组件答案

【问题标题】：Redux silently not rendering connect()ed componentRedux 静默不渲染 connect()ed 组件
【发布时间】：2015-09-23 17:39:02
【问题描述】：

我正在使用 Redux 编写应用程序，但根本无法渲染 Redux connect()ed 组件。

import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

var store = createStore((s, a) => s, {hello: "WORLD"});

class App extends React.Component {
  render() { return <h1> Hello, world! </h1>; }
}
var connectedApp = connect(function(s) { debugger })(App);

$(document).ready(function() {
  var target = document.getElementById("root");

  // DOES render
  React.render(<App/>, target);

  // Never renders
  React.render(<connectedApp/>, target);
});

该应用正在使用 babel、babelify、redux 和 redux-react。

在 connect() 中返回一个对象似乎也没有修改组件中的 this.props。传递给connect 的debugger 语句永远不会触发。

这段代码有问题吗？为什么组件不渲染？为什么debugger 语句永远不会触发？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

JSX 将以大写字母开头的组件类型转换为对该类型的 React.createElement 调用：

<App/> // => React.createElement(App);

但是，它将以小写字母开头的组件类型转换为 DOM 节点（通过将其作为字符串而不是引用传递）：

<connectedApp/> // => React.createElement("connectedApp");

事实上，如果您通过浏览器的检查器查看 DOM，您可能会看到

<connectedApp data-reactid=".0"></connectedApp>

尝试大写connectedApp:

var ConnectedApp = connect(...)(App);

// ...

React.render(<ConnectedApp/>, target);

【讨论】：

这太残酷了（我已经搞砸了好几个小时，试图了解我的应用做错了什么！）

【解决方案2】：

您没有将有效的 ReactElement 传递给您的第二个渲染方法。

第一个 <App/> 组件是有效的，因此正在渲染为 DOM 节点。

然而，第二个<connectedApp/> 不是 ReactElement。所以它根本不会被渲染。它只是一个功能。 var connectedApp = connect(function(s) { debugger })(App);

取自API from REDUXconnect函数的典型用法如下：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(App)

带有参数：

[mapStateToProps(state, [ownProps]): stateProps] (Function)

App 组件订阅 redux 存储更新，如果组件更新，则始终调用此函数。这个函数的返回应该是一个对象。

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

作为对象，内部的每个函数都将被识别为有效的动作创建者

您无需将 connect 传递给渲染方法，只需将您的 App 订阅到 REDUX 商店即可。

因此取自官方 REDUX 页面，这是您设置订阅的方式：

import { React } from 'react'
import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}

class TodoApp extends React.Component {
  //your App
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)`

【讨论】：