React
घटकों के बीच संवाद करें

स्टेटलेस फंक्शनल घटकों के बीच संचार

इस उदाहरण में हम Redux और React Redux मॉड्यूल का उपयोग अपने एप्लिकेशन स्टेट को संभालने और अपने कार्यात्मक घटकों को ऑटो-रेंडर करने के लिए करेंगे। Andcourse React and React Dom

आप यहां पूरा डेमो देख सकते हैं

नीचे दिए गए उदाहरण में हमारे पास तीन अलग-अलग घटक और एक जुड़ा घटक है

• UserInputForm: इस घटक प्रदर्शन एक इनपुट फ़ील्ड और जब क्षेत्र मूल्य परिवर्तन, यह कहता है inputChange पर विधि props (जो माता-पिता घटक द्वारा प्रदान की जाती है) और डेटा में अच्छी तरह से प्रदान की जाती है, तो यह प्रदर्शित करता है इनपुट क्षेत्र में है कि।

• UserDashboard: इस घटक प्रदर्शित करता है एक सरल संदेश है और यह भी घोंसले UserInputForm घटक, यह भी गुजरता inputChange को विधि UserInputForm घटक, UserInputForm घटक inturn बनाता है इस विधि का उपयोग करने के लिए माता पिता घटक के साथ संवाद करने।

  • UserDashboardConnected : यह घटक केवल ReactRedux connect विधि का उपयोग करके UserDashboard घटक को लपेटता है, इससे हमारे लिए घटक स्थिति का प्रबंधन करना और घटक को अद्यतन करना आसान हो जाता है जब राज्य बदलता है।

• अनुप्रयोग : यह घटक केवल UserDashboardConnected घटक प्रस्तुत करता है।

const UserInputForm = (props) => {
  
  let handleSubmit = (e) => {
    e.preventDefault();
  }

  return(
    <form action="" onSubmit={handleSubmit}>
      <label htmlFor="name">Please enter your name</label>
      <br />
      <input type="text" id="name" defaultValue={props.data.name || ''} onChange={ props.inputChange } />
    </form>
  )

}


const UserDashboard = (props) => {
   
  let inputChangeHandler = (event) => {
    props.updateName(event.target.value);
  }

  return(
    <div>
      <h1>Hi { props.user.name || 'User' }</h1>
      <UserInputForm data={props.user} inputChange={inputChangeHandler} />
    </div>
  )

}

const mapStateToProps = (state) => {
  return {
    user: state
  };
}
const mapDispatchToProps = (dispatch) => {
  return {
    updateName: (data) => dispatch( Action.updateName(data) ),
  };
};

const { connect, Provider } = ReactRedux;
const UserDashboardConnected = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserDashboard);



const App = (props) => {
  return(
    <div>
      <h1>Communication between Stateless Functional Components</h1>
      <UserDashboardConnected />
    </div>
  )
}



const user = (state={name: 'John'}, action) => {
  switch (action.type) {
    case 'UPDATE_NAME':
      return Object.assign( {}, state, {name: action.payload}  );

    default:
      return state;
  }
};

const { createStore } = Redux;
const store = createStore(user);
const Action = {
  updateName: (data) => {
    return { type : 'UPDATE_NAME', payload: data }
  },
}


ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('application')
);

जेएस बिन यूआरएल