2

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も、コンポーネントで変更されているようには見えませんでした。渡されたdebuggerステートメントは起動しconnectません。

このコードに何か問題がありますか? コンポーネントがレンダリングされないのはなぜですか? debuggerステートメントが起動しないのはなぜですか?

4

2 に答える 2

0

有効な ReactElement を 2 番目の render メソッドに渡していません。

最初の<App/>コンポーネントは有効であるため、DOM ノードとしてレンダリングされます。

ただし、2 つ目<connectedApp/>は ReactElement ではありません。したがって、まったくレンダリングされません。それは単なる機能です。var connectedApp = connect(function(s) { debugger })(App);

REDUXのAPI から取得した関数の一般的な使用法は次のconnectとおりです。

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

引数で：

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

コンポーネントは redux ストアの更新をサブスクライブし、Appコンポーネントが更新されると、この関数が常に呼び出されます。この関数の戻り値はオブジェクトでなければなりません。

[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)`
于 2016-01-09T11:42:50.760 に答える