In meiner React / Redux-App stehe ich oft vor dem Problem, Komponenten mit Status zu implementieren, die in der gesamten App verwendet werden sollen. Nehmen wir eine einfache Popup-Komponente als Beispiel mit einem offenen / geschlossenen Zustand, der auf jeder Seite wiederverwendet werden kann. Hier sind zwei mögliche Ansätze, die ich gefunden habe:
Verwende setState und "local" Reducer (ich benutze recompose.withReducer das ist nur Syntax Zucker für React native setState ), um seinen Zustand zu verwalten. Es sieht einfach und wiederverwendbar aus, bis Sie den Status der Komponente im anderen Teil Ihrer Seite ändern müssen (Schließen Sie das Popup in der Groß- / Kleinschreibung). Und Sie können nicht einfach eine Reduktive Aktion aufrufen, um den Status zu ändern.
Behalten Sie den Status der Komponente im Redux-Speicher. Mit diesem Ansatz können wir closePopupAction({ id }) an jeder Stelle des Komponentenbaums aufrufen, um seinen Zustand zu ändern. ' Aber wir müssen seinen Reduzierer (den ich im Popup-Ordner behalten möchte) irgendwie zum Root Reducer bringen, wenn die Komponente gemountet ist und ihn löschen, wenn die Komponente abgehängt ist. Außerdem können wir mehrere Popups auf der Seite haben, und jeder von ihnen hat seinen eigenen Status.
Hat jemand mit einem ähnlichen Problem konfrontiert?
Ich denke, du solltest den Zustand der Komponente in redux behalten. Sie können Reduzierer für diese Komponente erstellen und die Funktion combineReducers auf diese Weise verwenden:
%Vor%Wenn Sie dann closePopupAction ("id1") aufrufen, kann der Reducer die ID überprüfen und den richtigen Teil des Status ändern.
PS: Id sollte besser zur Verfügung gestellt werden:)
Sie könnten den Status jeder Komponente in einem eigenen Segment des Speichers speichern.
So würden Ihre closePopupAction -Aktionen mit diesem Mount-Pfad aufgerufen:
und Sie benötigen nur einen Reduzierer, um alle closePopupAction -Aktionen zu verarbeiten, die beim Start einmal registriert werden können:
Tags und Links reactjs redux react-redux recompose