10

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

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

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

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

4

2 に答える 2

1

コンポーネントの状態をreduxに保つべきだと思います。このコンポーネントのレデューサーを作成し、この方法で結合Reducers関数を使用できます:

rootReducer = combineReducers({
    moduleA: combineReducers({
      popupA: popupReducer("id1"),
      popupB: popupReducer("id2")
    }),
    moduleB: combineReducers({
      popupA: popupReducer("id3")
    })
  })
});

その後、 closePopupAction("id1") を呼び出すと、リデューサーは id を確認し、状態の適切な部分を変更できます。

PS：IDはより良い方法で提供する必要があります:)

于 2016-10-14T17:17:54.660 に答える