React
Communiceer tussen componenten

Communicatie tussen staatloze functionele componenten

In dit voorbeeld zullen we gebruik maken van Redux en React Redux modules om onze applicatiestatus af te handelen en voor automatische herrendering van onze functionele componenten., En natuurlijk React en React Dom

Je kunt de voltooide demo hier bekijken

In het onderstaande voorbeeld hebben we drie verschillende componenten en een aangesloten component

• UserInputForm : deze component geeft een invoerveld weer. Wanneer de veldwaarde verandert, wordt de methode inputChange op props inputChange (die door de bovenliggende component wordt geleverd) en als de gegevens ook worden verstrekt, wordt deze in het invoerveld weergegeven.

• UserDashboard : deze component geeft een eenvoudig bericht weer en nestelt UserInputForm component UserInputForm , het geeft inputChange methode UserInputForm component UserInputForm component UserInputForm maakt gebruik van deze methode om te communiceren met de bovenliggende component.

  • UserDashboardConnected : deze component verpakt de UserDashboard component gewoon met behulp van de ReactRedux connect . Dit maakt het ons gemakkelijker om de componentstatus te beheren en de component bij te werken wanneer de status verandert.

• App : deze component geeft alleen de component 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')
);

JS Bin URL