React
Communiquer entre les composants

Communication entre composants fonctionnels sans état

Dans cet exemple, nous utiliserons les modules Redux et React Redux pour gérer l’état de notre application et pour le rendu automatique de nos composants fonctionnels. Et ofcourse React et React Dom

Vous pouvez commander la démo terminée ici

Dans l'exemple ci-dessous, nous avons trois composants différents et un composant connecté

• UserInputForm : ce composant affiche un champ de saisie Et lorsque la valeur du champ change, il appelle la méthode inputChange sur les props (fournie par le composant parent) et, si les données sont également fournies, elle les affiche dans le champ de saisie.

• UserDashboard: Ce composant affiche un message simple et niche également UserInputForm composant, il passe également inputChange méthode pour UserInputForm composant, UserInputForm composant permet inturn utilisation de cette méthode pour communiquer avec le composant parent.

  • UserDashboardConnected : Ce composant encapsule simplement le composant UserDashboard aide de la méthode de ReactRedux connect . Cela simplifie la gestion de l'état du composant et la mise à jour du composant lorsque l'état change.

• App : Ce composant UserDashboardConnected simplement le composant 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')
);

URL de la corbeille JS