Привет,
Я использую 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} />
}
}
Имеет ли это смысл? Кто-нибудь еще сталкивался с этой проблемой?
Благодаря,
Ран.
Привет,
Это скорее проблема с реакцией-редукцией ... Возможно, мне что-то не хватает, но мне это кажется очень простым, используйте аргумент 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 в будущем.
Это не связано с этим хранилищем.
Самый полезный комментарий
Привет,
Это скорее проблема с реакцией-редукцией ... Возможно, мне что-то не хватает, но мне это кажется очень простым, используйте аргумент ownProps, который передается в mapStateToProps, поэтому ваш код выше будет выглядеть:
У вас определенно есть доступ к реквизитам компонента. Как это выглядит? См. Https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options для получения дополнительных сведений или https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js для реального примера ...