React
Kommunicera mellan komponenter

Kommunikation mellan statslösa funktionella komponenter

I det här exemplet kommer vi att använda Redux och React Redux moduler för att hantera vårt applikationstillstånd och för automatisk återgivning av våra funktionella komponenter., Och naturligtvis React och React Dom

Du kan kolla in den slutförda demonstrationen här

I exemplet nedan har vi tre olika komponenter och en ansluten komponent

• UserInputForm : Den här komponenten visar ett inmatningsfält Och när inputChange ändras kallar det inputChange metoden på props (som tillhandahålls av moderkomponenten) och om data också tillhandahålls, visas det i inmatningsfältet.

• UserDashboard : Den här komponenten visar ett enkelt meddelande och UserInputForm också UserInputForm komponenten, den överför också inputChange metoden till UserInputForm komponenten, UserInputForm komponentinturn använder denna metod för att kommunicera med överkomponenten.

  • UserDashboardConnected : Denna komponent slår bara in UserDashboard komponenten med ReactRedux connect . Detta gör det lättare för oss att hantera komponenttillståndet och uppdatera komponenten när tillståndet ändras.

• App : Den här komponenten gör bara UserDashboardConnected komponenten.

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