Redux 默默地不渲染 connect()ed 组件

Question

我正在使用 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 语句永远不会触发？

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

Answer 2

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

第一个 <App/> 组件有效，因此被呈现为 DOM 节点。

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

摘自API from REDUX connect函数的典型用法如下：

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

参数：

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

App组件订阅redux store更新，组件更新时总是调用该函数。这个函数的return应该是一个对象

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

作为对象，内部的每个函数都将被识别为有效的action creator

您不需要将 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)`

Redux 默默地不渲染 connect()ed 组件

Redux silently not rendering connect()ed component

reactjs

redux