問題タブ [recompose]

元の質問: https://github.com/acdlite/recompose/issues/232

BaseComponent の参照またはコンポーネントの任意のレベルにアクセスするにはどうすればよいですか?

コード：

私の React/Redux アプリでは、アプリ全体で使用する必要がある状態を持つコンポーネントを実装するという問題に直面することがよくあります。どのページでも再利用できるオープン/クローズ状態の例として、単純な popup コンポーネントを見てみましょう。私が見つけた2つの可能なアプローチを次に示します。

• その状態を管理するにはsetState、「ローカル」レデューサー ( React のネイティブの構文シュガーである recompose.withReducerを使用します) を使用します。setStateページの他の部分でコンポーネントの状態を変更する必要があるまでは、簡単で再利用可能に見えます (アウトの場合はポップアップを閉じます)。また、状態を変更するために redux アクションを呼び出すことはできません。

• コンポーネントの状態を Redux ストアに保持します。このようなアプローチを使用するとclosePopupAction({ id })、コンポーネント ツリーの任意の場所で呼び出すことができ、その状態を変更できます。コンポーネントはアンマウントされています。さらに、ページに複数のポップアップを含めることができ、それぞれに独自の状態があります。

誰かが同様の問題に直面しましたか?

Slider独自の状態を処理しないコンポーネントがあります。代わりに、状態SliderDragを管理し、小道具をSlider

それを達成するためにライブラリから使用withStateしています。recompose

ここに私のSlider状態の初期状態があります

そして、これが私の高次コンポーネントですwithState()

そして、これが私が使いたい方法ですSliderDrag。アプリのさまざまなコンテキストでstateこのコンポーネントを使用できるように、小道具を渡してイニシャルを設定したいSlider

ライブラリcomposeから使用する必要がありますか? recomposeアドバイスやヘルプをいただければ幸いです。:)

Recompose を使用して HoCwithStateとを作成する際のエラーlifecycle:

私のコンポーネントツリーは次のようになります。

私は単体テストの専門家ではなく、ダミーの todoapp プロジェクトで 100% のカバレッジを達成しようとしています。TodoList コンポーネントのような単純なコンポーネントは簡単ですが、AddTodo コンポーネントはどうですか?

これは私の現在の AddTodo テストです:

そのテストは次のカバレッジを生成します: Stmts 62.5、Branch 100、Funcs 25、Lines 62.5。

カバーされていない行は、12、16、21 です。

それらを正しくテストするにはどうすればよいですか？私は何が欠けていますか？このトピックに関するリソースはありますか?

私は最終的に問題を解決しました。目標は 100% のカバレッジを達成することであり、他には何もないことに注意してください。

これが私の解決策です：

私は withReducer HOC を使用していますが、この動作に気付きました: たとえば、クリック ハンドラーでこれを呼び出す:

それは生成します

こんにちは

世界

1

2

三

これは、reduce 関数が非同期で呼び出されることを意味します。変更をすぐに保存するのではなく、非同期と呼ぶ正当な理由は何ですか?

私は反応再構成ライブラリを見て、ここで違いを把握しようとしましたが、結果は同じで、ドキュメントを読んでみましたが、さらに混乱しました.なぜ同じことをするのに2つの方法があるのですか?