Wie verbinde ich Redux-Container in meiner Bibliothek mit dem Speicher, der der Anwendung gehört, die meine Bibliothek verwendet?

Question

Ich erstelle ein npm-Modul, das Redux für die Statusverwaltung verwendet. Mein Modul wird eine Bibliothek sein, die für einige Anwendungen verschiedener Kunden wiederverwendet wird. Ich hoffe, dass die Client-Anwendungen einen einzigen Speicher verwalten, den meine Bibliothek ebenfalls verwendet.

Das Problem betrifft die mapStateToProps Funktion, die ich in meiner Bibliothek an connect() übergeben muss. Ich weiß nicht, welcher Schlüssel der Benutzer meiner Bibliothek meine Reduzierungen und den Statusbaum platziert hat.

Ich könnte eine vernünftige Vermutung machen, wie der CamelCase-Name meiner Bibliothek. Dies scheint jedoch kein robuster Ansatz zu sein, weil 1/der Benutzer meinen Schlüssel für etwas anderes verwendet und 2/nur 1 Instanz meiner Bibliothek im Zustandsbaum sein könnte (ich kann mir einige Szenarien vorstellen, in denen ich es tun würde) will mehr als 1 Instanz).

Hier ist ein einfaches Beispiel für das Problem. Ich könnte ein Logon npm-Modul erstellen, das ich in meinen Store einhängen und Hierarchien anzeigen möchte. Ich kenne den Pfad innerhalb des Anwendungsspeichers nicht, daher der ???? in mapStateToProps. Gibt es einen schönen Weg, um mit dieser Situation umzugehen?

// node_modules/my-company-logon/ 

const LoginScreen = ({ username, failureReason }) => (
    // my presentation logic 
); 

export default connect(
    username: state.????.lastSessionUsername, 
    failureReason: state.????.failureReason 
)(LoginScreen); 

export const logonReducer(state, action) => { /* reducer logic */ } 




// my-customer/app.js 

import LogonScreen, { logonReducer } from 'my-company-logon'; 

let store = createStore(combineReducers({ 
    someUnexpectedPath: logonReducer 
})) 

EDIT:

Ich habe Art gelöst durch die Verbindungsfunktion reagieren-redux wickeln. Die Root-Komponente des Moduls hat den Kontext von Selektoren, die Daten von dem Ort lesen können, an dem die Lib angehängt wurde.

export default connect(
    (state, selectors, actionCreators) => ({ 
     username: selectors.getUsername(state), 
     loginFailureReason: selectors.getLogonFailureReason(state) 
    }) 
)(LoginScreen) 

Answer 1

Der häufigste Ansatz Ich habe von Redux-abhängige Bibliotheken gesehen ist damit der Benutzer sich die Bibliothek des Minderer in einem bekannten Zustand auf oberster Ebene Schlüssel, wie combineReducers({myLib : myLibReducer}) hinzuzufügen. Das funktioniert, ist aber offensichtlich etwas einschränkend.

Eine andere Option wäre die Bereitstellung einer Initialisierungsfunktion, die es dem Benutzer ermöglicht, den Schlüsselnamen einzugeben und Ihre lib dazu verwendet, Ihre Selektoren entsprechend einzurichten. Vielleicht möchten Sie einige Artikel über die Selektorverkapselung im Abschnitt Redux Architecture#Encapsulation meiner React/Redux links list, insbesondere Randy Coulman Artikel auf "encapsulating the Redux state tree" lesen. Schließlich können Sie die Quelle für einige der Redux-connected component libs durchsuchen, die ich auch aufgelistet habe.