Oi,
Estou usando redux com react-native e até agora está ótimo!
Em meu aplicativo, tenho perfis de usuário e meu estado é semelhante a:
{
users: {
"1": {id: "1", name: "Ran"},
"2": {id: "2", name: "Dan"}
}
}
Agora eu tenho um componente <Profile>
que processa um único usuário
class Profile extends React.Component {
componentDidMount() {
const { dispatch, userId } = this.props;
dispatch(loadUser(userId));
}
render() {
console.log(this.props.user.name);
}
}
Quando o componente é montado, despacho loadUser
action com userId
passado como prop.
Isso faz uma solicitação à API e adiciona a resposta do usuário ao meu estado users
.
Agora, quero que meu componente Perfil receba o usuário para renderizar como prop.
Basicamente, quero fazer algo como:
function mapStateToProps(state) {
return {
user: state.users[props.userId]
};
}
module.exports = connect(mapStateToProps)(Profile);
Obviamente, não pode funcionar porque não tenho acesso a acessórios.
Não posso usar um estado como selectedProfile
para filtrar porque estou renderizando vários perfis em minha pilha de navegação, cada um com um userId diferente, se eu usar o estado global selectedProfile, ele quebra o botão Voltar.
A única solução que encontrei é criar um componente ProfileContainer
, que filtrará o estado por seu prop e passará o único usuário para o componente Profile
.
class ProfileContainer extends React.Component {
render() {
let user = this.props.users[this.prop.userId];
return <Profile user={user} />
}
}
Isso faz sentido? Alguém mais encontrou esse problema?
Obrigado,
Correu.
Ei,
Este é mais um problema de react-redux ... Posso estar faltando alguma coisa, mas parece muito simples para mim, use o argumento "ownProps" que é passado para mapStateToProps, então seu código acima ficará:
function mapStateToProps(state, ownProps) {
return {
user: state.users[ownProps.userId]
};
}
module.exports = connect(mapStateToProps)(Profile);
Definitivamente, você tem acesso aos adereços do componente. Como fica isso? Veja https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options para mais detalhes ou https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js para o exemplo do mundo real ...
Não acredito que perdi isso! Obrigado @alanrubin
:afirmativo:
Arquive esses problemas no react-redux no futuro.
Não está relacionado a este repositório.
Comentários muito úteis
Ei,
Este é mais um problema de react-redux ... Posso estar faltando alguma coisa, mas parece muito simples para mim, use o argumento "ownProps" que é passado para mapStateToProps, então seu código acima ficará:
Definitivamente, você tem acesso aos adereços do componente. Como fica isso? Veja https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options para mais detalhes ou https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js para o exemplo do mundo real ...