2

我正在使用 Redux 编写应用程序，但根本无法connect()渲染 Redux 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在组件中进行修改。该debugger声明传递给connect永不开火。

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

4

2 回答 2

2

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);
于 2015-09-24T04:25:46.450 回答
0

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

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

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

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

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

与论点：

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

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

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

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

您不需要将 传递connect给渲染方法，只需订阅AppREDUX 商店即可。

所以取自官方 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)`
于 2016-01-09T11:42:50.760 回答