Redux: рд╕рд╣рд╛рд░рд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рд╣рд╛рд░рд╛ рдХреЗ рд▓рд┐рдП рд░рд╛рдЬреНрдп рдХрд╛ рдирдХреНрд╢рд╛?

рдХреЛ рдирд┐рд░реНрдорд┐рдд 6 рд╕рд┐рддре░ 2015  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: reduxjs/redux

рдирдорд╕реНрддреЗ,

рдореИрдВ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рдореВрд▓ рдХреЗ рд╕рд╛рде 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/ рд╡рд╛рд╕реНрддрд╡рд┐рдХ-рд╡рд┐рд╢реНрд╡ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП

рд╕рднреА 4 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЕрд░реЗ,

рдпрд╣ рдПрдХ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рд░рд┐рдбреНрдпреВрдХреНрд╕ рдореБрджреНрджрд╛ рдЕрдзрд┐рдХ рд╣реИ ... рдореБрдЭреЗ рдХреБрдЫ рдпрд╛рдж рдЖ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдмрд╣реБрдд рд╕рд░рд▓ рд▓рдЧрддрд╛ рд╣реИ, "рдЦреБрдж рдХреЗрдкреНрд░реЛрдкреНрд╕" рддрд░реНрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ рдЬреЛ рдореИрдкрд╕реНрдЯреИрдЯрдЯреЙрдкреНрд░реЛрдкреНрд╕ рдХреЛ рдкрд╛рд╕ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЖрдкрдХрд╛ рдХреЛрдб рдКрдкрд░ рджрд┐рдЦреЗрдЧрд╛:

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

:рдердореНрд╕ рдЕрдк:

рдХреГрдкрдпрд╛ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдЗрд╕ рддрд░рд╣ рдХреЗ рдореБрджреНрджреЛрдВ рдХреЛ рд░рд┐рдПрдХреНрдЯ-рд░рд┐рдбрдХреНрд╕ рдореЗрдВ рджрд░реНрдЬ рдХрд░реЗрдВред
рдпрд╣ рдЗрд╕ рднрдВрдбрд╛рд░ рд╕реЗ рдЕрд╕рдВрдмрдВрдзрд┐рдд рд╣реИред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

vslinko picture vslinko  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

captbaritone picture captbaritone  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

rui-ktei picture rui-ktei  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

timdorr picture timdorr  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

jbri7357 picture jbri7357  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ