Redux: ¿Mapear el estado de los accesorios usando accesorios?

Creado en 6 sept. 2015  ·  4Comentarios  ·  Fuente: reduxjs/redux

Hola,

Estoy usando redux con react-native y hasta ahora es genial.
En mi aplicación tengo perfiles de usuario y mi estado se ve así:

{
  users: {
    "1": {id: "1", name: "Ran"},
    "2": {id: "2", name: "Dan"}
  }
}

Ahora tengo un componente <Profile> que representa a un solo usuario

class Profile extends React.Component {
  componentDidMount() {
    const { dispatch, userId } = this.props;
    dispatch(loadUser(userId));
  }
  render() {
    console.log(this.props.user.name);
  }
}

Cuando el componente se monta, envío la acción loadUser con la userId pasada como prop.
Esto hace una solicitud a la API y agrega la respuesta del usuario a mi estado users .

Ahora, quiero que mi componente de perfil reciba al usuario para representarlo como prop.
Entonces, básicamente, quiero hacer algo como:

function mapStateToProps(state) {
  return {
    user: state.users[props.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

Obviamente, no puede funcionar porque no tengo acceso a accesorios.
No puedo usar un estado como selectedProfile para filtrar porque estoy representando varios perfiles en mi pila de navegación, cada uno tiene un ID de usuario diferente, si uso el estado global selectedProfile, rompe el botón Atrás.

La única solución que encontré es crear un componente ProfileContainer , que filtrará el estado por su propiedad y pasará el usuario único al componente Profile .

class ProfileContainer extends React.Component {
  render() {
    let user = this.props.users[this.prop.userId];
    return <Profile user={user} />
  }
}

¿Tiene sentido? ¿Alguien más encuentra este problema?

Gracias,
Corrió.

question

Comentario más útil

Oye,

Esto es más un problema de reacción-redux ... Puede que me esté perdiendo algo, pero me parece muy simple, use el argumento "ownProps" que se pasa a mapStateToProps, por lo que su código anterior se verá:

function mapStateToProps(state, ownProps) {
  return {
    user: state.users[ownProps.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

Definitivamente tienes acceso a los accesorios del componente. ¿Cómo se ve eso? Consulte https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options para obtener más detalles o https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js para el ejemplo del mundo real ...

Todos 4 comentarios

Oye,

Esto es más un problema de reacción-redux ... Puede que me esté perdiendo algo, pero me parece muy simple, use el argumento "ownProps" que se pasa a mapStateToProps, por lo que su código anterior se verá:

function mapStateToProps(state, ownProps) {
  return {
    user: state.users[ownProps.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

Definitivamente tienes acceso a los accesorios del componente. ¿Cómo se ve eso? Consulte https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options para obtener más detalles o https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js para el ejemplo del mundo real ...

¡No puedo creer que me perdí eso! Gracias @alanrubin

:Pulgares hacia arriba:

Presente estos problemas en react-redux en el futuro.
No está relacionado con este repositorio.

¿Fue útil esta página
0 / 5 - 0 calificaciones