Estou tentando configurar meu novo aplicativo react-redux para usar os novos recursos do React-Redux. A documentação oficial diz
O React Redux agora oferece um conjunto de APIs de gancho como uma alternativa ao componente de ordem superior connect () existente.
Eu tenho tentado encontrar alguns artigos de ajuda relacionados à API Hooks com alguns exemplos reais, mas todos os aplicativos react-redux estão usando a função connect. A documentação oficial também mostra exemplos muito básicos.
Desejo alterar as funções de conexão no meu aplicativo com useSelector (oferecido pela API Hooks).
Aqui está um exemplo de trecho de código do meu aplicativo.
//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> {
.
.
.
}
fonte