Reusable react-reduxコンテナコンポーネント

Question

私のReact/Reduxアプリケーションでは、アプリケーション全体で使用されるべき状態のコンポーネントを実装する問題に直面していることがよくあります。 単純なポップアップコンポーネントを、どのページでも再利用できるオープン/クローズ状態の例として考えてみましょう。その状態を管理するために（のネイティブsetStateを反応させるのためだけの構文糖である私はrecompose.withReducerを使用）

• 使用setStateと「ローカル」減速： は、ここに私が見つけた2可能なアプローチです。あなたのページの他の部分でコンポーネントの状態を変更する必要があるまで、簡単に再利用できます（閉じるポップアップの場合）。そしてあなたは状態を変えるためにいくらかの還元行為を呼び出すことはできません。

• コンポーネントの状態をReduxストアに保存します。このようなアプローチでは、コンポーネントツリーの任意の場所にあるclosePopupAction({ id })を呼び出して状態を変更することができます。しかし、コンポーネントがマウントされて削除されると、減速機（ポップアップのフォルダに入れたい）をルートレデューサーに置く必要がありますコンポーネントがアンマウントされたとき。さらに、ページ内に複数のポップアップがあり、それぞれに独自の状態があります。

誰も同じような問題に直面しましたか？

Answer 1

私はあなたがreduxのコンポーネントの状態を保つべきだと思います。あなたは、このコンポーネントの減速を作成し、このようにcombineReducers機能を使用することができます。

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

あなたはclosePopupAction（「ID1」）を呼び出すときに減速がIDをチェックし、状態の適切な部分を変更することができます。

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

Answer 2

あなたは店の独自のスライスに、各コンポーネントの状態をマウントすることができます。

closePopupAction({ mountPath: 'popups.popup1' }) 

、あなたは、起動時に一度登録することができ、すべてのclosePopupActionアクション、処理するための唯一の減速が必要になります：

だからあなたclosePopupActionアクションは、そのマウントパスと呼ばれます

(state, { type, mountPath }) => { 
     if (type === 'CLOSE_POPUP_ACTION') { 
     // manipulate with the slice at `mountPath`, e.g. 
     return _.set(_.cloneDeep(state), `${mountPath}.isOpen`, false) 
     } 
     // ... 
    }