問題タブ [react-redux]

私は React、React Native、および Redux を初めて使用するので、ここ数日間、これらのニュースの概念の多くに頭を悩ませようとしています。

私が今遭遇した問題の 1 つは、アクション オブジェクトをラップしてレデューサーに渡す前に、Action Creator で新しいデータを計算することです。これには、ステート ツリー内の他のブランチからのデータの一部が必要です。通常、これをどのように解決しますか？グローバル状態ツリーの構造を変更するか、このデータを必要とするコンポーネントにマップしますか?

状態ツリーを考えると:

そしておそらく、各ブランチは異なるレデューサーによって処理され、各ブランチのデータは小道具として別々のコンポーネントに渡されます。

シナリオは次のとおりです ( React チュートリアルを Redux を使用して React Native に翻訳しています):

1. SubmitForm で [Submit] ボタンがクリックされた
2. --> データが送信されていることをストアに通知するアクションをディスパッチしてから、{title,text} を非同期で取得して API サーバーに送信します。
3. 成功すると ---> API サーバーから返された dataSource を計算し、結果の dataSource を reducer に渡します (チュートリアルに従って)。また、dataSource を計算するとは、dataSource.cloneWithRows(....) (ここで説明) を意味し、上記のように ListView からの dataSource を必要とします。

したがって、これはステート ツリーの別のブランチからのものであるため、フォーム コンポーネントには dataSource という prop を含めるべきではないと考えました。しかし、それがなければ、目的のデータソースを実現する方法がわかりません。Redux パターンに関する私の理解では、ステート ツリーの構造を変更する (この場合は ListView と SubmitForm をマージする) ことも奇妙です。それで、誰かがこれを理解するのを手伝ってくれますか？ありがとう

レデューサーにステートメントを入れるconsole.log('test')と、アクションが呼び出されたときにコンソールでそれらを見ることができます。しかし、コンソールにreduxの「NEXT STATE」/「PREV STATE」が表示されません。

私が見逃している基本的なものはありますか？

以下のコードでは、実際の機能を実現しようとしているのではなく、redux をセットアップしてコンソールで状態の変化を確認しようとしているだけです (したがって、正しいパスにいることがわかります)。

容器

レデューサー

行動

React、Redux、React Router で構築されたかなり大きな webapp があります。Chrome で開発ツールを開くまで問題なく動作し、100 倍で著しく遅くなります。Chrome でアプリのプロファイリングを試みましたが、Chrome を使用して再度プロファイリングを開始すると、開発ツールを閉じた場合と同じくらい速く動作し始め、すべて問題ありません。

Safari と Opera もチェックしました - それらの開発ツールも webapp を遅くします。React/Chrome がパフォーマンスに大きく影響するのはなぜですか? React を誤用しているということですか、それとも React+Chrome によくある問題ですか? 回避策はありますか？

私はReactを学んでおり、いくつかのチュートリアルに従っていると、次のコードに出くわしました:

これは todo アプリケーションで、これがメイン ページです。さらに 2 つの小さなcomponents. 私はほとんどすべてを理解しましたが、いくつかのことを理解できませんでした:

• 何をしconnectますか？4つのパラメーターを渡す必要があることはわかっています（ただし、これらの4つの変数が何であるかを正確に取得できませんでした）。
• @connectデコレーターの実装はどうですか? トランスパイル後のコードはどのようになりますか?

前もって感謝します ：）

Redux アプリを次のようにレンダリングしています -

コンパイルされたコードは

これにより、エラーがスローされますUncaught Error: Invariant Violation: onlyChild must be passed a children with exactly one child.。React の開発バージョンでは、次の警告もスローされます。Warning: Failed propType: Invalid prop 'children' supplied to 'Provider', expected a single ReactElement.

単純に変更すると

コンパイルされたコードは次のようになります

そしてそれは適切にレンダリングされます。

プロバイダー バージョンは、デスクトップ クロームとデバイスのクローム ブラウザーで正常に読み込まれます。

ポインタはありますか？

私のサーバーには次のようなコードがあります。

<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>

<Layout>明らかに、より多くのコンポーネントがネストされています。

私はこのようなクラスを深く持っています:

私が本当にやりたいthis.props.onClickのは、イベントをディスパッチして reducer に状態を設定することではありません。私はコンテキストについてオンラインでいくつかのことを行ってきましたが、その機能が廃止された、または廃止されなかったため、さまざまなレビューを受けました.

編集 私はこの接続方法connectを見ますが、子コンポーネントでは使用しないことを誓ったかもしれません。