Redux: Mapear estado para adereços usando prop?

Criado em 6 set. 2015  ·  4Comentários  ·  Fonte: reduxjs/redux

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.

question

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á:

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 ...

Todos 4 comentários

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.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

vslinko picture vslinko  ·  3Comentários

ms88privat picture ms88privat  ·  3Comentários

elado picture elado  ·  3Comentários

CellOcean picture CellOcean  ·  3Comentários

parallelthought picture parallelthought  ·  3Comentários