Próbuję skonfigurować moją nową aplikację React-Redux, aby korzystać z nowych funkcji React-Redux. Oficjalna dokumentacja mówi
React Redux oferuje teraz zestaw interfejsów API przechwytujących jako alternatywę dla istniejącego komponentu wyższego rzędu connect ().
Próbowałem znaleźć kilka artykułów pomocniczych związanych z interfejsem API Hooks z prawdziwymi przykładami, ale wszystkie aplikacje Re-Redux używają funkcji łączenia. Oficjalna dokumentacja pokazuje również bardzo podstawowe przykłady.
Chcę zmienić funkcje łączenia w mojej aplikacji za pomocą useSelector (oferowanego przez Hooks API).
Oto przykładowy fragment kodu z mojej aplikacji.
//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> {
.
.
.
}
źródło