2017-05-13 17 views
1

私は答えを得るのに役立つためにどのような詳細を共有するのか分からないので、質問をするのはやめています。ここに問題があります:状態はredux devツールでは空のオブジェクトとして表示されます

アプリケーションは問題なく動作しています。すべてのデータはコンソールに印刷してReactアプリで消費するので、状態になります。しかし、下の図に示すように、反応開発ツールに表示される状態は「空のオブジェクト」です。これはChromeの& Firefox拡張機能とスタンドアロンバージョンのreact開発ツールでも同じです。コンポーネントツリーのあらゆるレベルに当てはまります。

State is 'empty object'

アプリは、クライアントを介してプロキシカスタム特急サーバーで作成反応するアプリを使用して反応させています。実行中のdev。データはMongoDBからのものです。

思考は、私は問題がある場合 1)をデバッグするために、関連するNPMパッケージ 2)を参照して、アプリのストリップダウン/簡易版を作成して、異なるバージョンのを試していたとされていない場合、その場所を見に戻って構築します導入されます。

私は明らかに#2をしたくないので、誰かが問題の原因を示唆してくれることを期待していました。

+0

devツールの 'state'は、redux状態ではなく、選択したコンポーネントの内部状態です。内部状態を持つコンポーネントを試してください。 –

+0

@TharakaWijebandara、ご意見ありがとうございます。 '内部状態'とは、コンポーネントのコンストラクタでthis.state = {...}を持つことを意味しますか?もしそうなら、私は、書籍「Redux Edgeの開発」のサンプルアプリケーションを見ています。 this.state = {...}はまったく使用されませんが、まだ開発ツールの状態を見ることができます。 – klequis

+0

はい。なぜ私は分からない。しかし、私は私の反応/ reduxアプリケーションの1つをチェックし、それは同じ動作をしています。 Btw私は反応devtoolsを使用しているとあなたはredux開発ツールと同じものを参照しているかどうかはわかりません。 –

答えて

0

各リアクションコンポーネントには内部状態があり、this.state.yourPropertyNameでアクセスし、this.setState({yourPropertyName: 'someValue'})で設定できます。この状態はReactの一部です。 Reactコンポーネントの状態でデータを渡す場合は、それを子コンポーネントにpropsとして渡す必要があります。

ReduxはReactから独立した別のライブラリです。 Reduxは、connect(mapStateToProps)(MyComponent)を使用して反応コンポーネントからアクセスできるグローバルな状態を使用して、アプリケーションの状態を管理するのに役立ちます。 connect()コンポーネントを使用している場合は、ラップトップReactコンポーネント(<Connect(Page)>コンポーネントを選択してReduxストアに接続し、<Page>コンポーネントをpropsとして渡す)を作成します。これがコンポーネントからRedux状態にアクセスする理由ですthis.props.myPropertyとして。あなたが見ている

Chromeの拡張機能が反応-デベロッパーツールである。そこstateセクションでは、のリアクト内部状態をいう。あなたは<Page>コンポーネントを選択した場合、あなたはおそらく下Reduxのストアからデータが表示されますpropsセクション

Redux状態を表示する場合は、https://github.com/zalmoxisus/redux-devtools-extensionまたはそれ以降を使用できます。 React-devtoolsで<Provider>コンポーネントを選択し、コンソールに$r.store.getState()と入力します。

関連する問題