Ich versuche, meine neue React-Redux-Anwendung so zu konfigurieren, dass sie die neuen Funktionen von React-Redux nutzt. Das offizielle Dokumentation sagt
React Redux bietet jetzt eine Reihe von Hook-APIs als Alternative zur vorhandenen connect () -Komponente höherer Ordnung.
Ich habe versucht, einige hilfreiche Artikel im Zusammenhang mit der Hooks-API mit einigen realen Beispielen zu finden, aber alle React-Redux-Apps verwenden die Verbindungsfunktion. Die offizielle Dokumentation zeigt auch sehr grundlegende Beispiele.
Ich möchte die Verbindungsfunktionen in meiner App mit useSelector (angeboten von der Hooks API) ändern.
Hier ist ein Beispiel-Code-Snippet aus meiner Anwendung.
//MessagesListContainer
export default connect(
// mapStateToProps
(state:State) => ({
activeUser: getActiveUser(state),
messages: getMessagesList(state),
})
)(MessagesList)
//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
Object.keys(state.messages).map((key : any)=> state.messages[key])
)
export interface IMessagesListProps {
activeUser?: User;
messages?: Message[];
}
/**
* Messages List
*/
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}
quelle