Redux: Сопоставить состояние с реквизитом с помощью пропса?

Созданный на 6 сент. 2015  ·  4Комментарии  ·  Источник: reduxjs/redux

Привет,

Я использую redux с react-native, и пока это здорово!
В моем приложении есть профили пользователей, и мое состояние выглядит так:

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

Теперь у меня есть компонент <Profile> который отображает одного пользователя

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

Когда компонент монтируется, я отправляю действие loadUser с userId переданным как опора.
Это делает запрос к API и добавляет ответ пользователя к моему состоянию users .

Теперь я хочу, чтобы мой компонент профиля получал пользователя для рендеринга в качестве опоры.
В общем, я хочу сделать что-то вроде:

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

Очевидно, это не может работать, потому что у меня нет доступа к реквизиту.
Я не могу использовать состояние типа selectedProfile для фильтрации, потому что я визуализирую несколько профилей в моем стеке навигации, у каждого из них свой userId, если я использую глобальное состояние selectedProfile, кнопка возврата ломается.

Единственный обходной путь, который я нашел, - это создать компонент ProfileContainer , который будет фильтровать состояние по своей опоре и передавать отдельного пользователя компоненту Profile .

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

Имеет ли это смысл? Кто-нибудь еще сталкивался с этой проблемой?

Благодаря,
Ран.

question

Самый полезный комментарий

Привет,

Это скорее проблема с реакцией-редукцией ... Возможно, мне что-то не хватает, но мне это кажется очень простым, используйте аргумент ownProps, который передается в mapStateToProps, поэтому ваш код выше будет выглядеть:

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

У вас определенно есть доступ к реквизитам компонента. Как это выглядит? См. Https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options для получения дополнительных сведений или https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js для реального примера ...

Все 4 Комментарий

Привет,

Это скорее проблема с реакцией-редукцией ... Возможно, мне что-то не хватает, но мне это кажется очень простым, используйте аргумент ownProps, который передается в mapStateToProps, поэтому ваш код выше будет выглядеть:

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

У вас определенно есть доступ к реквизитам компонента. Как это выглядит? См. Https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options для получения дополнительных сведений или https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js для реального примера ...

Не могу поверить, что я это пропустил! Спасибо @alanrubin

:недурно:

Пожалуйста, отправляйте такие проблемы в response-redux в будущем.
Это не связано с этим хранилищем.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги