Wielokrotnego użytku składniki kontenera reag-redux - reaktsy, redux, reag-redux, ponowne skomponowanie

W mojej aplikacji React / Redux często spotykam się zproblem wdrażania komponentów ze stanem, które powinny być używane w całej aplikacji. Weźmy prosty komponent wyskakujący jako przykład ze stanem otwórz / zamknij, który może być ponownie użyty na dowolnej stronie. Oto dwa możliwe podejścia, które znalazłem:

• Posługiwać się setState i "lokalny" reduktor (ja używam recompose.withReducer który jest po prostu składnikiem cukru dla natywnego Reacta setState), aby zarządzać swoim stanem. Wygląda na to, że jest łatwy i możliwy do ponownego użycia, dopóki nie zmienisz stanu składnika w drugiej części strony (zamknij wyskakujące okienko na zewnątrz) i nie możesz po prostu wywołać jakiegoś działania redux w celu zmiany stanu.

• Zachowaj stan komponentu w sklepie Redux, a dzięki takiemu podejściu możemy zadzwonić closePopupAction({ id }) w dowolnym miejscu drzewa komponentów do zmianyto jest stan. Ale potrzebujemy jakoś umieścić jego reduktor (który chcę zachować w folderze popup) do reduktora root'a, gdy komponent jest zamontowany i usunąć go, gdy komponent jest odmontowany. Dodatkowo możemy mieć pop-upy na stronie, a każdy z nich ma swój własny stan.

Czy ktoś miał podobny problem?

Odpowiedzi:

Myślę, że powinieneś zachować stan składnika w redux. Możesz utworzyć reduktor dla tego komponentu i użyć funkcji CombineReducers w następujący sposób:

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

wtedy gdy wywołasz closePopupAction ("id1") reduktor może sprawdzić id i zmienić odpowiednią część stanu.

PS: Id powinien być dostarczony w lepszy sposób :)

Możesz zamontować stan każdego komponentu do własnego wycinka sklepu.

Więc twój closePopupAction akcje będą wywoływane za pomocą tej ścieżki mount:

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

a do obsługi wszystkich potrzebowałbyś tylko jednego reduktora closePopupAction akcje, które można zarejestrować raz przy starcie:

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