рдирдорд╕реНрддреЗ,
рдореИрдВ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рдореВрд▓ рдХреЗ рд╕рд╛рде redux рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдЕрдм рддрдХ рдпрд╣ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реИ!
рдореЗрд░реЗ рдРрдк рдореЗрдВ рдореЗрд░реЗ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдкреНрд░реЛрдлрд╝рд╛рдЗрд▓ рд╣реИрдВ, рдФрд░ рдореЗрд░рд╛ рд░рд╛рдЬреНрдп рдРрд╕рд╛ рджрд┐рдЦрддрд╛ рд╣реИ:
{
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
рд╕рд╛рде рдкреНрд░реЛрдк рдХреЗ рд░реВрдк рдореЗрдВ рднреЗрдЬ рджреЗрддрд╛ рд╣реВрдВред
рдпрд╣ рдПрдкреАрдЖрдИ рдХреЗ рд▓рд┐рдП рдПрдХ рдЕрдиреБрд░реЛрдз рдХрд░рддрд╛ рд╣реИ, рдФрд░ рдореЗрд░реЗ users
рд░рд╛рдЬреНрдп рдореЗрдВ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреА рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЛ рдЬреЛрдбрд╝рддрд╛ рд╣реИред
рдЕрдм, рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдореЗрд░рд╛ рдкреНрд░реЛрдлрд╛рдЗрд▓ рдШрдЯрдХ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЛ рдкреНрд░рд╕реНрддрд╛рд╡ рдХреЗ рд░реВрдк рдореЗрдВ рдкреНрд░рд╕реНрддреБрдд рдХрд░реЗред
рдЗрд╕рд▓рд┐рдП рдореВрд▓ рд░реВрдк рд╕реЗ рдореИрдВ рдРрд╕рд╛ рдХреБрдЫ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ:
function mapStateToProps(state) {
return {
user: state.users[props.userId]
};
}
module.exports = connect(mapStateToProps)(Profile);
рдЬрд╛рд╣рд┐рд░ рд╣реИ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рдХреНрдпреЛрдВрдХрд┐ рдореЗрд░реЗ рдкрд╛рд╕ рдкреНрд░реЙрдкреНрд╕ рддрдХ рдкрд╣реБрдВрдЪ рдирд╣реАрдВ рд╣реИред
рдореИрдВ рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП selectedProfile
рдЬреИрд╕реЗ рд░рд╛рдЬреНрдп рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рдХреНрдпреЛрдВрдХрд┐ рдореИрдВ рдЕрдкрдиреЗ рдиреЗрд╡рд┐рдЧреЗрд╢рди рд╕реНрдЯреИрдХ рдореЗрдВ рдХрдИ рдкреНрд░реЛрдлрд╛рдЗрд▓ рдкреНрд░рджрд╛рди рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рдкреНрд░рддреНрдпреЗрдХ рдореЗрдВ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдЖрдИрдбреА рд╣реИрдВ, рдпрджрд┐ рдореИрдВ рд╡реИрд╢реНрд╡рд┐рдХ рдЪрдпрдирд┐рдд рд░рд╛рдЬреНрдп рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдмреИрдХ рдмрдЯрди рдХреЛ рддреЛрдбрд╝ рджреЗрддрд╛ рд╣реИред
рдореБрдЭреЗ рдЬреЛ рдПрдХрдорд╛рддреНрд░ рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдорд┐рд▓рд╛ рд╣реИ, рд╡рд╣ рд╣реИ ProfileContainer
рдШрдЯрдХ рдмрдирд╛рдирд╛, рдЬреЛ рд░рд╛рдЬреНрдп рдХреЛ рдЙрд╕рдХреЗ рдкреНрд░реЛрдк рд╕реЗ рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░реЗрдЧрд╛ рдФрд░ рдПрдХрд▓ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЛ Profile
рдШрдЯрдХ рдХреЛ рдкрд╛рд╕ рдХрд░реЗрдЧрд╛ред
class ProfileContainer extends React.Component {
render() {
let user = this.props.users[this.prop.userId];
return <Profile user={user} />
}
}
рдХреНрдпрд╛ рдЗрд╕ рдХрд╛ рдХреЛрдИ рдорддрд▓рдм рдирд┐рдХрд▓рддрд╛ рд╣реИ? рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рдХрд┐рд╕реА рдФрд░ рдХрд╛ рд╕рд╛рдордирд╛ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ?
рдзрдиреНрдпрд╡рд╛рдж,
рднрд╛рдЧ рдЧрдпрд╛ред
рдЕрд░реЗ,
рдпрд╣ рдПрдХ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рд░рд┐рдбреНрдпреВрдХреНрд╕ рдореБрджреНрджрд╛ рдЕрдзрд┐рдХ рд╣реИ ... рдореБрдЭреЗ рдХреБрдЫ рдпрд╛рдж рдЖ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдмрд╣реБрдд рд╕рд░рд▓ рд▓рдЧрддрд╛ рд╣реИ, "рдЦреБрдж рдХреЗрдкреНрд░реЛрдкреНрд╕" рддрд░реНрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ рдЬреЛ рдореИрдкрд╕реНрдЯреИрдЯрдЯреЙрдкреНрд░реЛрдкреНрд╕ рдХреЛ рдкрд╛рд╕ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЖрдкрдХрд╛ рдХреЛрдб рдКрдкрд░ рджрд┐рдЦреЗрдЧрд╛:
function mapStateToProps(state, ownProps) {
return {
user: state.users[ownProps.userId]
};
}
module.exports = connect(mapStateToProps)(Profile);
рдЖрдк рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдШрдЯрдХ рдХреЗ рд╕рд╣рд╛рд░рд╛ рддрдХ рдкрд╣реБрдБрдЪ рд╕рдХрддреЗ рд╣реИрдВред рд╡рд╣ рдХреИрд╕рд╛ рджрд┐рдЦрддрд╛ рд╣реИ? рдЕрдзрд┐рдХ рдЬрд╛рдирдХрд╛рд░реА рдХреЗ рд▓рд┐рдП https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops- рд╡рд┐рдХрд▓реНрдк рджреЗрдЦреЗрдВ рдпрд╛ https://github.com/rackt/redux/bubb/master/examples/real-world/containers/ рд╡рд╛рд╕реНрддрд╡рд┐рдХ-рд╡рд┐рд╢реНрд╡ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП
рдореБрдЭреЗ рд╡рд┐рд╢реНрд╡рд╛рд╕ рдирд╣реАрдВ рд╣реЛ рд░рд╣рд╛ рд╣реИ рдХрд┐ рдореИрдВ рдЪреВрдХ рдЧрдпрд╛! рд╕рд╛рднрд╛рд░ @alanrubin
:рдердореНрд╕ рдЕрдк:
рдХреГрдкрдпрд╛ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдЗрд╕ рддрд░рд╣ рдХреЗ рдореБрджреНрджреЛрдВ рдХреЛ рд░рд┐рдПрдХреНрдЯ-рд░рд┐рдбрдХреНрд╕ рдореЗрдВ рджрд░реНрдЬ рдХрд░реЗрдВред
рдпрд╣ рдЗрд╕ рднрдВрдбрд╛рд░ рд╕реЗ рдЕрд╕рдВрдмрдВрдзрд┐рдд рд╣реИред
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдЕрд░реЗ,
рдпрд╣ рдПрдХ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рд░рд┐рдбреНрдпреВрдХреНрд╕ рдореБрджреНрджрд╛ рдЕрдзрд┐рдХ рд╣реИ ... рдореБрдЭреЗ рдХреБрдЫ рдпрд╛рдж рдЖ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдмрд╣реБрдд рд╕рд░рд▓ рд▓рдЧрддрд╛ рд╣реИ, "рдЦреБрдж рдХреЗрдкреНрд░реЛрдкреНрд╕" рддрд░реНрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ рдЬреЛ рдореИрдкрд╕реНрдЯреИрдЯрдЯреЙрдкреНрд░реЛрдкреНрд╕ рдХреЛ рдкрд╛рд╕ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЖрдкрдХрд╛ рдХреЛрдб рдКрдкрд░ рджрд┐рдЦреЗрдЧрд╛:
рдЖрдк рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдШрдЯрдХ рдХреЗ рд╕рд╣рд╛рд░рд╛ рддрдХ рдкрд╣реБрдБрдЪ рд╕рдХрддреЗ рд╣реИрдВред рд╡рд╣ рдХреИрд╕рд╛ рджрд┐рдЦрддрд╛ рд╣реИ? рдЕрдзрд┐рдХ рдЬрд╛рдирдХрд╛рд░реА рдХреЗ рд▓рд┐рдП https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops- рд╡рд┐рдХрд▓реНрдк рджреЗрдЦреЗрдВ рдпрд╛ https://github.com/rackt/redux/bubb/master/examples/real-world/containers/ рд╡рд╛рд╕реНрддрд╡рд┐рдХ-рд╡рд┐рд╢реНрд╡ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП